如何将派生字符串的值传递给v模型

Question

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

我在顶部包括了单选按钮，它们将数据变量“字段” 的值从 name 切换到 place ，即a-viz。

文本输入的

v模型包含 field ，我想使用changeField（）方法进行更新。

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>

基于单选，我想在底部的名称/位置前面显示输出。我只想使用单个文本输入来执行此操作。有人可以帮我吗？

Answer 1

您可以使用 watch 属性来监视价值变化。每当您在文本框中键入内容时，字段属性的值就会更改，它会调用观察程序。根据 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:{
  },
});

Answer 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>