Question

这是我的代码：

      <v-container grid-list-md fluid-fix>
        <div v-for="(data ,c) in chapter.data" :key="c" class="my-3" style="border: 1px solid;">
          <v-layout row wrap px-3>
            <v-flex xs12 sm1>
              <v-text-field v-model="data.num" label="Chapter"></v-text-field>
            </v-flex>
            <v-flex xs12 sm3>
              <v-text-field v-model="data.name" label="name"></v-text-field>
            </v-flex>
            <v-flex xs12 sm8 d-flex>
              <v-text-field v-model="data.description" label="short info" style="width: 100%;"></v-text-field>
              <div>
                <v-btn class="d-inline-flex servers--btn" color="success" @click="addServer(c)">add server</v-btn>
              </div> 
            </v-flex>
          </v-layout>

          <v-container grid-list-md fluid-fix>
            <v-layout wrap v-for="(server ,s) in data.servers" :key="s">
            <v-flex sm12>
              <div class="d-inline-flex">
                <v-autocomplete
                :items="data.serverlist"
                v-model="server.server_id"
                @input="serverChange(data)"
                label="Server"
              ></v-autocomplete>
              </div>
              <div class="d-inline-flex text-xs-right pr-1">
                <v-btn color="orange" class="white--text servers--btn" @click="demo_edit(c,s,server.links)">demo and Edit</v-btn>
              </div>
              <div class="d-inline-flex text-xs-right pr-1" style="float: right;">
                <v-btn color="red" class="white--text servers--btn" @click="delSvOnChap(c,s)">Delete Server</v-btn>
              </div>
            </v-flex>

            <v-flex sm12>
              <v-textarea
                v-model="server.links"
                label="box image"
              ></v-textarea>
            </v-flex>
            </v-layout>
          </v-container>

serverChange(data){
  data.serverlist.forEach(obj => {
    if(_.find(data.servers,{server_id: obj.value})){
      obj.disabled = true
    }else{
      obj.disabled = false
    }
  });

},

serverChange在方法中我想确定已禁用键中的更新，但它正在更新数组

中的所有对象

当我登录serverChange函数时，我只看到一个对象返回，这就是我期待的结果，但是当我将此对象设置为禁用时，vue将更新数组中的所有对象

我需要针对这个问题的解决方案。

v-for in vue更新了数组中的所有对象，尽管已确定了密钥

0 个答案: