如何使Vue组件与v模型保留值类型一起使用？

Question

问题

当我在HTML v-model上使用<select>时，v-model会将给定属性设置为保留该值的所选值的类型-如果我将数字绑定到{{ 1}}，将模型属性设置为数字，如果我将一个对象绑定到该对象，则将其设置。

<option>

我有一个<script> export default { data: { options: [5, 10, 15, 'text', { 'description': 'I am an Object' }], } }; </script> <template> <select v-model="model"> <option v-for="option in options" :value="option" > {{ option }} </option> </select> <template> 自定义组件，它为我包装了<base-select>标签的用法。我正在尝试为此实现相同的<select>行为，但是失败了，因为类型没有保留-即使在绑定数字或对象的情况下，我始终都返回String。

v-model

提琴

在这里可以清楚地看到此行为：http://jsfiddle.net/4o67pzLs/14/

第一个选择是保留绑定到模型的值的类型，而另一个选择是始终将值设置为Strings。

问题

是否可以在自定义组件上实现//// BaseSelect.vue <script> export default { props: { options: { type: Array, required: true }, value: { required: true } }, }; </script> <template> <select :value="value" @input="$emit('input', $event.target.value)" > <option v-for="option in options" :value="option" > {{ option }} </option> </select> </template> //// App.vue <script> @import 'BaseSelect' from './BaseSelect'; export default { components: { BaseSelect, }, data: { options: [5, 10, 15, 'text', { 'description': 'I am an Object' }], } }; </script> <template> <base-select v-model="model" :options="options" /> <template> ，以保留类型？如果可以，怎么办？

Answer 1

这是我们最终与@RobertKusznier一起完成的方法：

• 使用v-model
将选择与组件的计算属性绑定在一起
• 为该计算出的属性定义吸气剂和吸气剂
• getter返回组件的值
• 设置器发出更改事件

它保留所选选项的值的类型，并且不更改组件的值。

贷记给@RobertKusznier，他建议我们不要更改组件的值。

let baseSelect = {
	props: {
  	options: {
    	type: Array,
      required: true
    },
    value: {
    	required: true
    }
  },
  
  computed: {
  	valueCopy: {
    	get() {
      	return this.value;
      },
      set(value) {
      	this.$emit('input', value);
      }
    }
  },
  
  template: `
  	<select
      v-model="valueCopy"
    >
      <option
        v-for="option in options"
        :value="option"
      >
        {{ option }}
      </option>
    </select>
  `,
};

new Vue({
	el: '#app',
  components: {
  	baseSelect
  },
  data: {
  	model: 5,
    options: [5, 10, 15, 'text', new Date()]
  },
  template: `
    <div>
      <select v-model="model">
        <option
          v-for="option in options"
          :value="option">
            {{ option }}
        </option>
      </select>
      
      <base-select
        v-model="model"
        :options="options"
        :sister="10"
      />
      
      <p>model: {{ model }}</p>
      <p>typeof model: {{ typeof model }}</p>
    </div>
  `
});

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