如何从多个 vue select 实例中获取值？

Question

我有 2 个对象数组，如下所示。我需要为每个 questions 元素创建一个 select，并且我需要通过 ID 将选项与 selections 相关联。在这种情况下，我需要有 2 个 select，第一个将有 1000、5000 和 10000 作为选项，同时第二个 select 将有 yes 和 no 作为选项

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'
    }
]

我在 vue 中是这样做的，但问题是我无法将数据保存在 v-model 中，因为我从 cars() 返回值而不是 [= 中指定的变量21=]

<div class="form-group" v-for="item in questions" v-bind:key="item.question">
    <h5 v-if="showQuestion(item.id)">{{ item.question }}</h5>

    <div class="tour-options-select" v-if="showQuestion(item.id)">
        <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown" v-model="questions.value">
            <option v-for="item1 in cars(item.id)" v-bind:key="item1.id" :value="item1.display_name">{{ item1.display_name }}</option>
        </select>
    </div>
</div>

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

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>

另一种方法是使用 events 来处理更改，每次用户进行选择时调用自定义函数，例如使用 @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 select 实例中获取值？

How do I get values from multiple vue select instances?

javascript

vue.js

vuejs2

v-for

v-model