javascript - 尝试让 Vue.js 在两个区域显示选项答案

Question

我读过的 Vue.js 选项允许您在数组中拥有两个项目并将它们绑定(bind)在一起。因此，您可以选择一个并将另一个数组值连接起来。我想做的是将第三个选项附加到数组中并将其显示在网页上。

<div id="rain_fall">
    <span>Select year of rain fall</span><select v-model="selected" v-model="information">
        <option v-for="option in options" :value="option.value" :copy="option.copy">{{ option.text }}</option>
    </select><br>
    <span>Amount of rain: {{ selected }}</span><br>
    <span>Information: {{ information }}</span>

我有一个jsfiddle

Answer 1

它本身并不是这样工作的，但使用一些 JavaScript 很容易实现

http://jsfiddle.net/0k1uq7u9/3/

<h1>Chicago's Top Ten Wettest Years</h1>
<div id="rain_fall">
    <span>Select year of rain fall</span><select v-model="selected" @change="updateInformation">
        <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <span>Amount of rain: {{ selected }}</span>
    <span>{{ information }}</span>
</div>

var vm;
vm = new Vue({
    el: "#rain_fall",
    data: {
        selected: '50.86',
        information: 'test',
        options: [
            {text: "2008", value: "50.86", copy: "test"},
            {text: "2011", value: "49.83", copy: "test2"},
            {text: "1983", value: "49.35", copy: "test3"},
            {text: "1970", value: "46.09", copy: "test4"},
            {text: "1954", value: "45.92", copy: "test5"},
            {text: "1883", value: "45.86", copy: "test6"},
            {text: "2001", value: "45.77", copy: "test7"},
            {text: "1993", value: "44.90", copy: "test8"},
            {text: "1982", value: "44.58", copy: "test9"},
            {text: "1885", value: "44.37", copy: "test10"}
        ]
    },
    computed: {
        // a computed getter
      copyInformationGetter: function () {
        return this.information
      },
    },
    methods: {
        updateInformation() {
        const index = this.options.findIndex(option => option.value === this.selected)
        this.information = this.options[index].copy
    }
   }

});