Question

我有一个Vue组件，我使用GL2016来访问value属性。我如何扩展它以获得internalValue？

即internalValue = ID

我试过但我不知道如何在internalValue函数中添加它。我甚至试图通过将所有值的实例更改为id来获取ID，但它仍会吐出值。

我很乐意将它们作为一个value, id，或者像value, id和data.value

那样访问它们

初始化Vue

data.id

使用组件

new Vue({
        el: '#topic',
        data: {
        selectedTopic: null
    }
});

注册组件

<div class="form-group" id="topic">
    <topic v-model="selectedTopic"></topic>
</div>

组件

Vue.component('topic', require('./components/Topicselect.vue'));

Answer 1

使用所选主题作为您的值。基本上，完全消除internalValue，并在单击时发出与任何给定单选按钮相关联的主题。这将满足v-model，因为它会监听input个事件（除非您自定义它）。

export default {
  props: ['value'],
  data () {
    return {
      topics: []
    }
  },
  methods:{
    selectValue(topic){
      this.$emit('input', topic)
    }
  },
  mounted(){
    axios.get('/vuetopics').then(response => this.topics = response.data);
  }
})

和你的模板

<template>
  <div>
    <label v-for="topic in topics" class="radio-inline radio-thumbnail">
      <input type="radio" @click="selectValue(topic)" name="topics_radio" :id="topic.id" :value="topic.name" :checked="value && topic.id == value.id">
      <span class="white-color lg-text font-regular text-center text-capitalize">{{ topic.name }}</span>
    </label>
    <ul class="hidden">
      <li>{{ value }}</li>
    </ul>
  </div>
</template>

这会将您的Vue中的selectedTopic设置为主题，类似于

{
    id: 2,
    name: "some topic"
}

基于您在模板中的使用方式。

Working example

扩展组件中的Vue功能以显示ID

1 个答案: