如何使用 vue 动态更改所选值？

Question

我正在努力根据我使用 vue 选择的内容进行相应的更改，如下面链接上的代码所示。

<div id="app">

  <span class="selectboxWrap">
    <select v-on:change="changeSearchMonths" ref="comCd" v-model="searchParams.searchTaxTerm">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </span>
  <span class="selectboxWrap">
    <select v-on:change="changeSearchMonths" ref="comCd" v-model="searchParams.planConfirmFlag">
      <option value="P">P</option>
      <option value="F">F</option>
    </select>
  </span>
  <br>
  <div class="boxHorizental">
    <span class="dateRange full">
      <div class="selectboxWrap">
        <select v-model="searchParams.searchFromInvoiceDate">
          <option v-for="opt in monthOptions" v-bind:key="opt.val" v-bind:value="opt.val">
            {{ opt.text }}
          </option>
        </select>
      </div>
      <em class="dash">~</em>
      <div class="selectboxWrap">
        <select v-model="searchParams.searchToInvoiceDate">
          <option v-for="opt in monthOptions" v-bind:key="opt.val" v-bind:value="opt.val">
            {{ opt.text }}
          </option>
        </select>
      </div>
    </span>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    searchParams: {},
    monthOptions: [{
        text: 1,
        val: '01'
      },
      {
        text: 2,
        val: '02'
      },
      {
        text: 3,
        val: '03'
      },
      {
        text: 4,
        val: '04'
      },
      {
        text: 5,
        val: '05'
      },
      {
        text: 6,
        val: '06'
      },
      {
        text: 7,
        val: '07'
      },
      {
        text: 8,
        val: '08'
      },
      {
        text: 9,
        val: '09'
      },
      {
        text: 10,
        val: '10'
      },
      {
        text: 11,
        val: '11'
      },
      {
        text: 12,
        val: '12'
      }
    ]
  },
  methods: {

    changeSearchMonths: function() {
      if (this.searchParams.searchTaxTerm === '1' && this.searchParams.planConfirmFlag === 'P') {

        this.searchParams.searchFromInvoiceDate = '01'
        this.searchParams.searchToInvoiceDate = '03'
      } else if (this.searchParams.searchTaxTerm === '1' && this.searchParams.planConfirmFlag === 'F') {
        this.searchParams.searchFromInvoiceDate = '04'
        this.searchParams.searchToInvoiceDate = '06'
      } else if (this.searchParams.searchTaxTerm === '2' && this.searchParams.planConfirmFlag === 'P') {
        this.searchParams.searchFromInvoiceDate = '07'
        this.searchParams.searchToInvoiceDate = '09'
      } else if (this.searchParams.searchTaxTerm === '2' && this.searchParams.planConfirmFlag === 'F') {
        this.searchParams.searchFromInvoiceDate = '10'
        this.searchParams.searchToInvoiceDate = '12'
      }
    }
  },
  created() {

      this.searchParams.searchTaxTerm = '1'
      this.searchParams.planConfirmFlag = 'P'
      this.searchParams.searchFromInvoiceDate = '01'
      this.searchParams.searchToInvoiceDate = '06'
  }
})

</script>

https://jsfiddle.net/L90ur587/5/

我可以看到我的价值观在 dev 上发生了变化。 工具，但选定的框不会相应地改变，有没有办法让页面相应地切换？

例如，如果我更改顶部两个选择框中的任何一个的值，则下面的其他选择框应相应更改。 现在值改变了，但不是前视图上的选择框

Answer 1

不要在created中分配默认值！
这就是data的用途。 在data中声明每个子属性（使用任何值，除了undefined ）将允许 Vue 将 setter 和 getter 包装在它们周围，使它们具有反应性。

在mounted后运行changeSearchMonths ，以便将您的自定义逻辑应用于默认值。 我冒昧地重写了您的代码，使其更具可读性。

 Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', data: () => ({ searchParams: { searchToInvoiceDate: '06', searchFromInvoiceDate: '01', planConfirmFlag: 'P', searchTaxTerm: '1' } }), methods: { pad(n) { return `${n}`.padStart(2, '0') }, changeSearchMonths() { const p = this.searchParams; switch (true) { case p.searchTaxTerm === '1' && p.planConfirmFlag === 'P': p.searchFromInvoiceDate = '01'; p.searchToInvoiceDate = '03'; break; case p.searchTaxTerm === '1' && p.planConfirmFlag === 'F': p.searchFromInvoiceDate = '04'; p.searchToInvoiceDate = '06'; break; case p.searchTaxTerm === '2' && p.planConfirmFlag === 'P': p.searchFromInvoiceDate = '07'; p.searchToInvoiceDate = '09'; break; case p.searchTaxTerm === '2' && p.planConfirmFlag === 'F': p.searchFromInvoiceDate = '10'; p.searchToInvoiceDate = '12'; break; default: } } }, mounted() { this.changeSearchMonths() } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <span class="selectboxWrap"> <select @change="changeSearchMonths" ref="comCd" v-model="searchParams.searchTaxTerm"> <option value="1">1</option> <option value="2">2</option> </select> </span> <span class="selectboxWrap"> <select @change="changeSearchMonths" ref="comCd" v-model="searchParams.planConfirmFlag"> <option value="P">P</option> <option value="F">F</option> </select> </span> <br> <div class="boxHorizental"> <span class="dateRange full"> <div class="selectboxWrap"> <select v-model="searchParams.searchFromInvoiceDate"> <option v-for="n in 12" :key="n" :value="pad(n)" v-text="n" /> </select> </div> <em class="dash">~</em> <div class="selectboxWrap"> <select v-model="searchParams.searchToInvoiceDate"> <option v-for="n in 12" :key="n" :value="pad(n)" v-text="n" /> </select> </div> </span> </div> </div>

旁注：您在同一个键（ comCd ）下有两个参考。 虽然它不是无效或非法的（模板中的后者只是简单地覆盖了第一个），但众所周知它会引起不良反应，例如显影剂脱发。

另外，非常重要： 数据必须是函数！
这允许 Vue 将其反应性添加到该函数返回的对象中声明的所有属性。

Answer 2

更改值后，您的 dom 不会更新。 您需要强制更新 dom。在函数changeSearchMonths的末尾添加this.$forceUpdate() 。

下面的工作片段：

 new Vue({ el: '#app', data: { searchParams: {}, monthOptions: [{ text: 1, val: '01' }, { text: 2, val: '02' }, { text: 3, val: '03' }, { text: 4, val: '04' }, { text: 5, val: '05' }, { text: 6, val: '06' }, { text: 7, val: '07' }, { text: 8, val: '08' }, { text: 9, val: '09' }, { text: 10, val: '10' }, { text: 11, val: '11' }, { text: 12, val: '12' } ] }, methods: { changeSearchMonths: function() { if (this.searchParams.searchTaxTerm === '1' && this.searchParams.planConfirmFlag === 'P') { this.searchParams.searchFromInvoiceDate = '01' this.searchParams.searchToInvoiceDate = '03' } else if (this.searchParams.searchTaxTerm === '1' && this.searchParams.planConfirmFlag === 'F') { this.searchParams.searchFromInvoiceDate = '04' this.searchParams.searchToInvoiceDate = '06' } else if (this.searchParams.searchTaxTerm === '2' && this.searchParams.planConfirmFlag === 'P') { this.searchParams.searchFromInvoiceDate = '07' this.searchParams.searchToInvoiceDate = '09' } else if (this.searchParams.searchTaxTerm === '2' && this.searchParams.planConfirmFlag === 'F') { this.searchParams.searchFromInvoiceDate = '10' this.searchParams.searchToInvoiceDate = '12' } this.$forceUpdate(); } }, created() { this.searchParams.searchTaxTerm = '1' this.searchParams.planConfirmFlag = 'P' this.searchParams.searchFromInvoiceDate = '01' this.searchParams.searchToInvoiceDate = '06' } })

 <!doctype html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span class="selectboxWrap"> <select v-on:change="changeSearchMonths" ref="comCd" v-model="searchParams.searchTaxTerm"> <option value="1">1</option> <option value="2">2</option> </select> </span> <span class="selectboxWrap"> <select v-on:change="changeSearchMonths" ref="comCd" v-model="searchParams.planConfirmFlag"> <option value="P">P</option> <option value="F">F</option> </select> </span> <br> <div class="boxHorizental"> <span class="dateRange full"> <div class="selectboxWrap"> <select v-model="searchParams.searchFromInvoiceDate"> <option v-for="opt in monthOptions" v-bind:key="opt.val" v-bind:value="opt.val"> {{ opt.text }} </option> </select> </div> <em class="dash">~</em> <div class="selectboxWrap"> <select v-model="searchParams.searchToInvoiceDate"> <option v-for="opt in monthOptions" v-bind:key="opt.val" v-bind:value="opt.val"> {{ opt.text }} </option> </select> </div> </span> </div> </div> </body> </html>