代码之家  ›  专栏  ›  技术社区  ›  mana

无法从我的方法访问数据

  •  0
  • mana  · 技术社区  · 6 年前

    挑选出来的 “来自我的方法的数据” 项目变更
    我得到的错误是“ this.selected未定义

    我的问题是如何从我的方法访问组件数据?

    我的组件实现

    import VueSelect from 'vue-select';
    
    Vue.component('v-select', VueSelect);
            Vue.component('club-type',{
                template: "#club-type",
                props: ['options'],
    
            data: {
                    selected: {title: 'My title', logo: 'logo here', info: 'info here'}
            },
            methods: {
                itemChange: function () {
                    console.log("msg: " + this.selected['title']);
                }
            }
        });
    

    <script type="text/x-template" id="club-type">
    
                    <v-select :options="options" label="title" :on-change="itemChange" :searchable="false" v-model="selected">
    
                        <template slot="option" scope="option">
                            <div class="float-left-items">
                                <div class="club-type-thumb" v-if="option.logo"><img v-bind:src="option.logo"></div>
    
                                <div class="club-type-title">{{ option.title }} <br/> <span class="pill club-type-pill"> AGE {{ option.age }}</span></div>
                            </div>
                        </template>
                    </v-select>
    </script>
    

    在上面的模板中,如果我添加 v-model=“选定” 它显示出一个错误“ "

    1 回复  |  直到 6 年前
        1
  •  1
  •   EmmanuelBeziat    6 年前

    首先,您需要返回数据:

    data () {
      return {
        selected: { title: 'My title', logo: 'logo here', info: 'info here' }
      }
    },
    

    然后,它不是一个数组,所以不能像在方法中那样访问它。你必须把它叫做财产。

    this.selected.title
    

    :如@Phil所述,不需要第二点。