Question

我有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 }, { 'question_id': 1, 'value': 10000 }, { 'question_id': 2, 'value': 'yes' }, { 'question_id': 2, 'value': 'no' } ]返回值，而不是在{{1}中指定的变量}

cars()

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

Answer 1

如果您在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
      },
      {
        'question_id': 1,
        'value': 10000
      },
      {
        'question_id': 2,
        'value': 'yes'
      },
      {
        'question_id': 2,
        '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',
  data: {
    questions: [{
        'id': 1,
        'question': 'KM'
      },
      {
        'id': 2,
        'question': 'Works'
      }
    ],
    selections: [{
        'question_id': 1,
        'value': 1000
      },
      {
        'question_id': 1,
        'value': 5000
      },
      {
        'question_id': 1,
        'value': 10000
      },
      {
        'question_id': 2,
        'value': 'yes'
      },
      {
        'question_id': 2,
        'value': 'no'
      }
    ],
  },
  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 @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>

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

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

1 个答案: