如何从多个vue选择实例获取值？

如何解决如何从多个vue选择实例获取值？

我有2个对象数组，如下所示。我需要为每个questions元素创建一个select，并且需要使这些选项通过id与selections连接。在这种情况下，我需要选择2个选项，第一个选择将具有1000，5000和10000作为选项，而第二个选择将具有yes和{{1} }作为选项

no

我在Vue中做到了这一点，但是问题是我无法将数据保存在v模型中，因为我要从const questions = [{ 'id': 1,'question': 'KM' },{ 'id': 2,'question': 'Works' } ] const selections = [{ 'question_id': 1,'value': 1000 },{ 'question_id': 1,'value': 5000 },'value': 10000 },{ 'question_id': 2,'value': 'yes' },'value': 'no' } ] 返回值，而不是在{{1}中指定的变量}

cars()

最终，我只需要知道，当我具有上面定义的结构时，如何获取值？

解决方法

如果您在data()中有一个数组来存储所选的选项，则可以使用v-model与该数组中的元素进行动态绑定（如果您为其指定了索引）：

new Vue({
  el: '#app',data: {
    questions: [{
        'id': 1,'question': 'KM'
      },{
        'id': 2,'question': 'Works'
      }
    ],selections: [{
        'question_id': 1,'value': 1000
      },{
        'question_id': 1,'value': 5000
      },'value': 10000
      },{
        'question_id': 2,'value': 'yes'
      },'value': 'no'
      }
    ],selected: [],},methods: {
    cars: function(id) {
      return this.selections.reduce((arr,currSel) => {
        if (currSel.question_id == id)
          arr.push(currSel);
        return arr;
      },[]);
    },}
});

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<div id="app">
  <div v-for="(question,index) in questions" :name="question.question" :key="question.id">
    <select v-model="selected[index]">
      <option v-for="option in cars(question.id)" :key="option.question_id" :value="option.value">
        {{ option.value }}
      </option>
    </select>
  </div>

  <p>Selected:</p>
  <pre>{{ $data.selected }}</pre>
</div>

另一种方法是使用事件来处理更改，每次用户进行选择时都调用自定义函数，例如使用@change：

new Vue({
  el: '#app',index) in questions" :name="question.question" :key="question.id">
    <select @change="console.log('Option',$event.target.value,'chosen for Q',question.id)">
      <option selected disabled>Select...</option>
      <option v-for="option in cars(question.id)" :key="option.question_id" :value="option.value">
        {{ option.value }}
      </option>
    </select>
  </div>
</div>

通过这种方式，您可以根据需要自由地存储或处理数据，但必须手动进行。