如何将派生字符串的值传递给 v-model答案

【问题标题】：How pass value of a derived string to v-model如何将派生字符串的值传递给 v-model
【发布时间】：2019-01-25 12:15:26
【问题描述】：

我正在尝试使用一种方法将值传递给 v-model，但它不起作用。

我在顶部添加了单选选择器，它可以将数据变量 'field' 的值从 name 切换到 place 和 viz-即。

文本输入的 v-model 包含我想使用 changeField() 方法更新的 field。

new Vue({
  el: "#app",
	data: {
		name:'',
		place:'',
		field:'',
		selectedField:'name',
	},
	methods:{
		changeField(){
			if(this.selectedField=='name'){
				this.field='name';
			}
			else{
				this.field='place';
			}
		}
	},
})

body {padding: 15px;}
input {
	border-radius: 3px;
	padding:5px	;
	border:thin solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

	<input type='radio' v-model='selectedField' value='name' @change='changeField'>Name
	<input type='radio' v-model='selectedField' value='place'@change='changeField'>Place

<br>
	<input type="text" v-model="field">
	<br><br>
	{{selectedField}}

	<br>
		Field name: {{field}}
		<br>
		Name: {{name}}	
		<br>
		Place: {{place}}
</div>

基于收音机选择，我想在底部的名称/地点前面显示输出。我只想使用单个文本输入来做到这一点。有人可以帮帮我吗？

【问题讨论】：

你不能用一个单一的输入来做到这一点。使用两个输入并使用v-if 管理它们的可见性。
你上面的例子工作正常。
@Frank：感谢您的回复，我可以使用 v-if 来做到这一点，但只是发布在 stackoverflow 上，看看是否有人可以帮助使用单个输入来做同样的事情。
@santanubera：如果我在单选按钮中选择“名称”，我想在 {{name}} 中显示文本输入的数据，如果我选择“Place”，则在 {{place}} 中显示相同在无线电输入中。

标签： vue.js vuejs2

【解决方案1】：

您可以使用 watch 属性来观察值的变化。每当您在文本框中键入内容时，field 属性的值都会发生变化，并且它会调用观察者。根据selectedField属性的值，对应的属性获取值。因此，如果 selectedField 是 place，那么该值将转到属性 place。这是示例-

new Vue({
  el: "#app",
  data: {
    name:'',
    place:'',
    field:'',
    selectedField:'name',
  },
  watch:{
    field:function(value){
      if(this.selectedField == 'name')
        this.name = value;
      else
        this.place = value;
    }
  },
  methods:{
  },
});

【讨论】：

【解决方案2】：

像这样？使用watchers.

new Vue({
  el: "#app",
	data: {
		name:'',
		place:'',
		field:'',
		selectedField:'name',
	},
    watch: {
        field() {
            if (this.selectedField=='name'){
                this.name=this.field;
            } else {
                this.place=this.field
            }
        }
    },
	methods:{
		changeField(){
			if(this.selectedField=='name'){
				this.field='name';
			}
			else{
				this.field='place';
			}
		}
	},
})

body {padding: 15px;}
input {
	border-radius: 3px;
	padding:5px	;
	border:thin solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

	<input type='radio' v-model='selectedField' value='name' @change='changeField'>Name
	<input type='radio' v-model='selectedField' value='place'@change='changeField'>Place

<br>
	<input type="text" v-model="field">
	<br><br>
	{{selectedField}}

	<br>
		Field name: {{field}}
		<br>
		Name: {{name}}	
		<br>
		Place: {{place}}
</div>

【讨论】：