Html 如何使用vue动态更改选定值？
我正在努力根据我对vue的选择做出相应的改变，如下面链接上的代码所示Html 如何使用vue动态更改选定值？,html,vue.js,Html,Vue.js,我正在努力根据我对vue的选择做出相应的改变，如下面链接上的代码所示 <div id="app"> <span class="selectboxWrap"> <select v-on:change="changeSearchMonths" ref="comCd" v-model="searchParams.searchTaxTerm">
<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>
e、 g.如果我更改顶部两个选择框中任何一个的值，则下面的其他选择框应相应更改。现在值会更改，但前视图上的选择框不会更改。更改值后，dom不会更新。您需要强制更新dom。请在函数changeSearchMonths结束时添加此项。$forceUpdate 下面的工作代码段： 新Vue{ el:“应用程序”， 数据：{ searchParams:{}， 月份：[{ 案文：1， 瓦尔：“01” }, { 案文：2， 瓦尔：“02” }, { 案文：3， 瓦尔：“03” }, { 案文：4， 瓦尔：“04” }, { 案文：5， 瓦尔：“05” }, { 案文：6， 瓦尔：“06” }, { 案文：7， 瓦尔：“07” }, { 案文：8， 瓦尔：“08” }, { 文本：9， 瓦尔：“09” }, { 案文：10， 瓦尔：“10” }, { 案文：11， 瓦尔：“11” }, { 案文：12， 瓦尔：“12” } ] }, 方法：{ 更改搜索月份：功能{ 如果this.searchParams.searchTaxTerm==“1”和&this.searchParams.planConfirmFlag==“P”{ this.searchParams.searchFromInvoiceDate='01' this.searchParams.searchToInvoiceDate='03' }否则，如果this.searchParams.searchTaxTerm==“1”&&this.searchParams.planConfirmFlag==“F”{ this.searchParams.searchFromInvoiceDate='04' this.searchParams.searchToInvoiceDate='06' }否则，如果this.searchParams.searchTaxTerm=='2'&&this.searchParams.planConfirmFlag=='P'{ this.searchParams.searchFromInvoiceDate='07' this.searchParams.searchToInvoiceDate='09' }否则，如果this.searchParams.searchTaxTerm==“2”和&this.searchParams.planConfirmFlag==“F”{ this.searchParams.searchFromInvoiceDate='10' this.searchParams.searchToInvoiceDate='12' } 这是最新情况； } }, 创造{ this.searchParams.searchTaxTerm='1' this.searchParams.planConfirmFlag='P' this.searchParams.searchFromInvoiceDate='01' this.searchParams.searchToInvoiceDate='06' } } 1. 2. P F {{opt.text}} ~ {{opt.text}}
更改值后，dom不会更新。您需要强制更新dom。请在函数changeSearchMonths结束时添加此项。$forceUpdate 下面的工作代码段： 新Vue{ el:“应用程序”， 数据：{ searchParams:{}， 月份：[{ 案文：1， 瓦尔：“01” }, { 案文：2， 瓦尔：“02” }, { 案文：3， 瓦尔：“03” }, { 案文：4， 瓦尔：“04” }, { 案文：5， 瓦尔：“05” }, { 案文：6， 瓦尔：“06” }, { 案文：7， 瓦尔：“07” }, { 案文：8， 瓦尔：“08” }, { 文本：9， 瓦尔：“09” }, { 案文：10， 瓦尔：“10” }, { 案文：11， 瓦尔：“11” }, { 案文：12， 瓦尔：“12” } ] }, 方法：{ 更改搜索月份：功能{ 如果this.searchParams.searchTaxTerm==“1”和&this.searchParams.planConfirmFlag==“P”{ this.searchParams.searchFromInvoiceDate='01' this.searchParams.searchToInvoiceDate='03' }否则，如果this.searchParams.searchTaxTerm==“1”&&this.searchParams.planConfirmFlag==“F”{ this.searchParams.searchFromInvoiceDate='04' this.searchParams.searchToInvoiceDate='06' }否则，如果this.searchParams.searchTaxTerm=='2'&&this.searchParams.planConfirmFlag=='P'{ this.searchParams.searchFromInvoiceDate='07' this.searchParams.searchToInvoiceDate='09' }否则，如果this.searchParams.searchTaxTerm==“2”和&this.searchParams.planConfirmFlag==“F”{ this.searchParams.searchFromInvoiceDate='10' this.searchParams.searchToInvoiceDate='12' } 这是最新情况； } }, 创造{ this.searchParams.searchTaxTerm='1' this.searchParams.planConfirmFlag='P' this.searchParams.searchFromInvoiceDate='01' 这是searchPar ams.searchToInvoiceDate='06' } } 1. 2. P F {{opt.text}} ~ {{opt.text}}
不要在“已创建”中指定默认值！ 这就是数据的用途。使用任何值（未定义的值除外）声明数据中的每个子属性将允许Vue将setter和getter包装在它们周围，使它们成为被动的 内部安装后运行changeSearchMonths，以便将自定义逻辑应用于默认值。我冒昧地重写了您的代码，使其可读性稍高一些 Vue.config.devtools=false； Vue.config.productionTip=false； 新Vue{ el:“应用程序”， 数据：=>{ 搜索参数：{ searchToInvoiceDate:'06'， searchFromInvoiceDate:'01'， planConfirmFlag:'P'， searchTaxTerm:'1' } }, 方法：{ 帕登{ 返回“${n}”。padStart2，“0” }, 更改搜索月份{ const p=this.searchParams； 切换为真{ 案例p.searchTaxTerm=='1'&&p.planConfirmFlag=='p'： p、 searchFromInvoiceDate='01'； p、 searchToInvoiceDate='03'； 打破 案例p.searchTaxTerm=='1'&&p.planConfirmFlag=='F'： p、 searchFromInvoiceDate='04'； p、 searchToInvoiceDate='06'； 打破 案例p.searchTaxTerm=='2'&&p.planConfirmFlag=='p'： p、 searchFromInvoiceDate='07'； p、 searchToInvoiceDate='09'； 打破 案例p.searchTaxTerm=='2'和p.planConfirmFlag=='F'： p、 searchFromInvoiceDate='10'； p、 searchToInvoiceDate='12'； 打破 违约： } } }, 安装{ 这是一个月 } } 1. 2. P F ~
不要在“已创建”中指定默认值！ 这就是数据的用途。使用任何值（未定义的值除外）声明数据中的每个子属性将允许Vue将setter和getter包装在它们周围，使它们成为被动的 内部安装后运行changeSearchMonths，以便将自定义逻辑应用于默认值。我冒昧地重写了您的代码，使其可读性稍高一些 Vue.config.devtools=false； Vue.config.productionTip=false； 新Vue{ el:“应用程序”， 数据：=>{ 搜索参数：{ searchToInvoiceDate:'06'， searchFromInvoiceDate:'01'， planConfirmFlag:'P'， searchTaxTerm:'1' } }, 方法：{ 帕登{ 返回“${n}”。padStart2，“0” }, 更改搜索月份{ const p=this.searchParams； 切换为真{ 案例p.searchTaxTerm=='1'&&p.planConfirmFlag=='p'： p、 searchFromInvoiceDate='01'； p、 searchToInvoiceDate='03'； 打破 案例p.searchTaxTerm=='1'&&p.planConfirmFlag=='F'： p、 searchFromInvoiceDate='04'； p、 searchToInvoiceDate='06'； 打破 案例p.searchTaxTerm=='2'&&p.planConfirmFlag=='p'： p、 searchFromInvoiceDate='07'； p、 searchToInvoiceDate='09'； 打破 案例p.searchTaxTerm=='2'和p.planConfirmFlag=='F'： p、 searchFromInvoiceDate='10'； p、 searchToInvoiceDate='12'； 打破 违约： } } }, 安装{ 这是一个月 } } 1. 2. P F ~
哦，是的，它是原始代码中的一个函数，在编写代码段时遗漏了它。谢谢你的建议。威尔会更深入地调查的@MrSolid，您所需要做的就是将默认值从created移动到data，并在mounted中运行changeSearchMonths。我所做的其他更改是没有必要的，但我想你可能会发现它们很有用。一般来说，我建议不要使用$forceUpdate。它会使你的应用程序速度变慢，并掩盖数据流中的潜在问题。另一个问题是，它使调试变得更加困难和缓慢，因为您现在将拥有更长的跟踪线程。哦，是的，它是原始代码中的一个函数，在编写代码段时丢失了它。谢谢你的建议。威尔会更深入地调查的@MrSolid，您所需要做的就是将默认值从created移动到data，并在mounted中运行changeSearchMonths。我所做的其他更改是没有必要的，但我想你可能会发现它们很有用。一般来说，我建议不要使用$forceUpdate。它会使你的应用程序速度变慢，并掩盖数据流中的潜在问题。另一个问题是它是mak
es调试更加困难和缓慢，因为您现在有更长的跟踪线程。因此，在我的方法运行后，它没有被更新。直到。谢谢原因是没有在数据中声明子道具，即使是空的。因此，对它们的改变不是反应性的。因此，若要使用您所拥有的内容对searchFromInvoiceDate进行反应式更新，您可以使用Vue.setthis.searchParams、“searchFromInvoiceDate”、“04”或this.searchParams={…this.searchParams、searchFromInvoiceDate:“04”}作为跟踪的父对象。因此，在我的方法运行后不会对其进行更新。直到。谢谢原因是没有在数据中声明子道具，即使是空的。因此，对它们的改变不是反应性的。因此，若要使用您所拥有的内容反应式更新searchFromInvoiceDate，您可以使用Vue.setthis.searchParams、“searchFromInvoiceDate”、“04”或this.searchParams={……this.searchParams、searchFromInvoiceDate:'04}作为跟踪的父对象。