如何使 Vue 组件与 v-model 保留值类型一起工作？

Question

问题

当我在 HTML <select> 上有 v-model 时，v-model 将给定属性设置为该值的选定值保留类型 - 如果我将数字绑定到 <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> 标签的用法。我正在尝试为它实现相同的 v-model 行为，但失败了，因为类型没有被保留 - 我一直返回字符串，即使我在绑定数字或对象时也是如此。

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

小提琴

这里是这种行为清晰可见的地方：http://jsfiddle.net/4o67pzLs/14/

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

问题

是否可以在自定义组件上实现v-model，这样可以保留类型？如果有，怎么做？

Answer 1

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

• 使用v-model将选择与组件的计算属性绑定
• 为该计算属性定义 getter 和 setter
• getter 返回组件的值
• setter 发出更改事件

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

感谢@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>