Vue选择影响其他选择器当前选择的选择[重复]答案

【问题标题】：Vue select affecting other selector's currently selected choice [duplicate]Vue选择影响其他选择器当前选择的选择[重复]
【发布时间】：2021-02-14 16:53:37
【问题描述】：

我有一个显示某个 Nova 资源的表格。对于每一行，我都有一个选择器，可以让我从下拉列表中执行一项操作。问题是，假设我有 3 行。每行都有相同的选择器。假设选择器有选项 A、B 和 C。如果我转到第一行并选择选项 B，其他选择器也会将其当前选择的值更改为 B。我假设这是因为所有选择器都有相同的 v-model 绑定，但我不知道如何解决这个问题。

这是表格和选择器的代码：

<table id="favorites">
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Source</th>
                <th>Description</th>
                <th>Date of Creation</th>
                <th>Posted Status</th>
                <th>Actions</th>
            </tr>
    
            <tr v-for="(favorite, index) in favorites" :key="index">
                <td>{{favorite.id}}</td>
                <td>{{favorite.title}}</td>
                <td>{{favorite.source}}</td>
                <td>{{favorite.description}}</td>
                <td>{{favorite.created_at}}</td>
                <td>
                    <div v-if="favorite.posted_status === 2">
                        <button class="button-posted button4">Posted</button>
                    </div>
                    <div v-else>
                        <button class="button-not-posted button4">Not Posted</button>
                    </div>
                </td>
                <td>
                    <select @change="toggle_posted(favorite)" v-model="selected_state" class="form-control form-control-lg">
                        <option selected disabled>Choose an action </option>    
                        <option v-for="(state, index) in posted_states" :key="index" :value="state.id">{{state.name}}</option>
                    </select>
                </td>
            </tr>
        </table>

我想分离选择器，这样它们就不会相互镜像。还值得注意的是，当其他选择器发生变化时，它们实际上并没有调用toggle_posted 方法。只有我选择的选择器可以。

【问题讨论】：

您将所有选择绑定到相同的v-model .. 您可能还想为模型使用数组（例如v-model="selected_state[index]"）。见stackoverflow.com/a/52530507
我知道这是绑定，但我不知道该怎么做。非常感谢，效果很好。

标签： javascript vue.js

【解决方案1】：

解决此问题的直接方法是为favorites 中的每个列表项添加selected_state 属性：

new Vue({
  el:"#app",
  data: () => ({
    favorites: [
      { id:1, title:'1', source:'1', description:'1', created_at:'1', posted_status: 1, selected_state:null },
      { id:2, title:'2', source:'2', description:'2', created_at:'2', posted_status: 2, selected_state:null }
    ],
    selected_state: null,
    posted_states: [
      { id:1, name:'1' }, { id:2, name:'2' }
    ]
  }),
  methods: {
    toggle_posted(favorite) {
      console.log(favorite)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table id="favorites">
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Source</th>
      <th>Description</th>
      <th>Date of Creation</th>
      <th>Posted Status</th>
      <th>Actions</th>
    </tr>
    <tr v-for="(favorite, index) in favorites" :key="index">
      <td>{{favorite.id}}</td>
      <td>{{favorite.title}}</td>
      <td>{{favorite.source}}</td>
      <td>{{favorite.description}}</td>
      <td>{{favorite.created_at}}</td>
      <td>
        <div v-if="favorite.posted_status === 2">
          <button class="button-posted button4">Posted</button>
        </div>
        <div v-else>
          <button class="button-not-posted button4">Not Posted</button>
        </div>
      </td>
      <td>
        <select @change="toggle_posted(favorite)" v-model="favorite.selected_state" class="form-control form-control-lg">
          <option selected disabled>Choose an action </option>    
          <option v-for="(state, index) in posted_states" :key="index" :value="state.id">{{state.name}}</option>
        </select>
      </td>
    </tr>
  </table>
</div>

【讨论】：