javascript - 这样写页面选中没有生效？

Question

<div class="select-lier">          <div class="selcer">共{{brandaddlist.length}}项</div>          <el-button size="small" @click="allclick">全选</el-button>          <el-button size="small" @click="allclicbtn">反选</el-button>        </div>        <div class="change-box">          <div class="select-l" v-for="v,i in brandaddlist" :key="v.key">            <div class="chang-sel">              <div class="tyep-ore">{{v.key}}</div>              <el-button size="small" @click="selectAll(v)">全选</el-button>              <el-button size="small" @click-="invert(v)">反选</el-button>            </div>            <div class="check-box" v-for="item in v.list" :key="item.ID">              <el-checkbox                v-model="item.select"                :label="item.AdminAccount"                :checked="item.select==0?false:true"                name="type"                @change="clickcheckbox(item)"              />            </div>          </div>        </div>const allclick = async () => {        await nextTick();        brandaddlist.value.forEach((v) => {          v.list.forEach((item) => {            item.select = 1;          });        });        console.log(brandaddlist.value);      }; 这样写页面选中没有生效

这样写页面选中没有生效

Answer 1

这段代码中的问题在于v.list.forEach((item) => { item.select = 1; });。这一行试图直接修改item.select的值，但是实际上并未成功。这是因为item在这里是原始数据，而不是响应式引用。

Vue 3 的 Composition API（比如 ref 和 reactive）提供了一种方式来创建响应式的数据。在你的代码中，你需要在数据被创建时使用这些函数。

你可以尝试将你的代码修改为以下形式：

import { ref, nextTick } from 'vue';export default {  setup() {    const brandaddlist = ref([      // 你的初始数据    ]);    const allclick = async () => {      await nextTick();      brandaddlist.value.forEach((v) => {        v.list.forEach((item) => {          if (!item.select) item.select = ref(0); // 确保每个 item.select 都是响应式的          item.select.value = 1; // 修改响应式引用的值        });      });      console.log(brandaddlist.value);    };    return { allclick };  }}

注意，我在这里添加了 ref(0) 来确保 item.select 是一个响应式引用。然后我使用 .value 来访问和设置这个引用的值。这样，当你修改 item.select.value 时，Vue 将知道这个值已经改变，并相应地更新 DOM。