VUE，无法在选择组件中使用选定的选项值

vshtjzan 于 2022-11-25 发布在 Vue.js

关注(0)|答案(1)|浏览(145)

我正在尝试使用选定的选项值。无法显示或保存该值。
这是我的子组件

<script>
export default {
  props: {
    options : {
      type:Array,
    },
    selectOpt:undefined,
  }
  emits : ['input','change','option:selected']
}
</script>

<template>
<div>
  <h1>
    Hi, I'm a component
  </h1>
<select
        v-model="selectOpt"
        @change="$emit('input', event.target.value)">
  <option v-for="option in options"
          :key="option"
          >{{option}}</option>
</select>
</div>
</template>

这是我的父母
`

<script >
  import Comp from './Comp.vue'
export default {
  data() {
    return {
      options : [1,2,3,4,5,6],
      optSelected : undefined,
    }
  },
  components: {
    Comp
  }
}
</script>

<template>
  <Comp v-model="optSelected" :options="options"></Comp>
  <p>
    --->{{optSelected}}
  </p>
</template>

`
我尝试在“input”事件和“change”事件中进行更改。不确定我做错了什么。我发现了一个解决方案，需要一个我不喜欢使用的vue-select库。

vue.js

来源：https://stackoverflow.com/questions/74550339/vue-cant-use-selected-option-value-in-a-select-component

1条答案

按热度按时间

vmdwslir1#

这是一个简单的细节：在版本3中，您需要使用update:modelValue来更改父组件中的v-model。（参考：（第10页）
还有一件事：你不应该把这个道具当作v-model来使用，以防止在你的应用程序中出现副作用。你可以在这里读到更多关于它的信息：https://eslint.vuejs.org/rules/no-mutating-props.html
希望能有所帮助：

<script>
export default {
  props: {
    options: {
      type: Array
    },
    selectOpt: undefined
  },
  emits: ['update:modelValue'],
  watch: {
    innerValue(newValue) {
      this.$emit('update:modelValue', newValue)
    },
    selectOpt(newValue) {
      this.innerValue = newValue;
    }
  },
  data() {
    return {
      innerValue: this.selectOpt
    };
  }
};
</script>

<template>
  <div>
    <h1>Hi, I'm a component</h1>
    <select v-model="innerValue">
      <option v-for="option in options" :key="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

赞(0）回复(0）举报 2022-11-25

我来回答

VUE，无法在选择组件中使用选定的选项值

1条答案

相关问题

热门标签

最新问答