vue.js - VueJS - 如何在传递值其他选项值时显示输入文本以及选择的选项

Question

我正在尝试实现选择标签以添加下拉菜单，我正在使用两个组件来实现这一点。

这是我的SelectOption.vue

    <select v-model="inter" >
         <option disabled value="">Select One</option>
         <option value="A">A</option>
         <option value="B">B</option>
         <option value="C">C</option>
    </select>
       <input type="text" v-if="this.inter === 'C'">

  ...

  props: {
        value: {type: String,},
  },
  computed: {
        inter: {
          get() {return this.value},
            set(val) {this.$emit('input', val)}
        }
      }
}

这是我的EditOption.vue

      <SelectOption v-model="test"></SelectOption>

...

import SelectOption from './SelectOption'
export default {
  data(){return{test: "C"}     // Here I am passing the string value in test
  },
  components: {Test},
}

这里是同一个https://codesandbox.io/s/vue-template-forked-xgjo2?file=/src/components/EditOption.vue的 CodeSandbox

实际上我有三个值 'A'、'B' 和 'C' ，假设说我已经在数据中传递了 'A' 值，然后显示 A 选项，现在我在这里寻找不同的东西。

假设我在数据中传递“新”字符串，然后我希望它自动选择 C ​​选项并且输入文本字段应该显示该字符串。

在 jsFiddle 中，我给出了inter: 'C'所以它显示了 C 选项并且还显示了输入字段，假设如果inter: 'text'那么我希望它自动选择选项 C 并且文本必须是显示在输入文本字段中。

因此，总结除 'A' 和 'B' 之外传递的任何字符串，它应该自动选择选项 C，并且字符串必须显示在输入文本字段中，并且如果在输入文本字段中进行了一些更改，它应该检测到这一点。

标签： vue.jsselectinputbindingfield