Question

我已经在vue js文件中定义了该函数，但是它给了nameWithLang（）函数一个错误，请看一下

我的表格

<multiselect v-model="selected" track-by="id" label="name" :options="options" :loading="isLoading" :internal-search="false" @search-change="getData" :multiple="true" :close-on-select="false" :hide-selected="true":internal-search="false" name="books[]" :show-labels="false" :custom-label="nameWithLang"></multiselect>

我的vue js文件

import AppForm from '../app-components/Form/AppForm';

Vue.component('coupon-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                name:  '' ,
                description:  '' ,
                valid_from:  '' ,
                valid_till:  '' ,
                discount:  '' ,
                enabled:  false,
                books: [],
            },
            isLoading: false,
            options: [],
            selected: [],

        }
    },
    methods: {
        nameWithLang({ name, sku }) {
          return `${name} — ${sku}`
        },
        getData(query){
            this.isLoading = true;

            axios.post('/admin/books/find/'+query)
            .then((response) => {
                this.options = response.data;
                this.isLoading = false;
            })
            .catch((error) => {
                this.isLoading = false;
            });
        },
    },
    watch: {
        selected (newValues) {
             this.form.books = newValues.map(obj => obj.id)
        }
    }
});

其他属性和函数正常工作nameWithLang不正常

Property or method "nameWithLang" is not defined on the instance but referenced during render.

Answer 1

为什么不只是将值返回到数据变量中，然后将函数设置为mount / watch，而不是使用函数来获取值。

仅供参考，您可以使脚本如下：

import AppForm from '../app-components/Form/AppForm';

Vue.component('coupon-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                name:  '' ,
                description:  '' ,
                valid_from:  '' ,
                valid_till:  '' ,
                discount:  '' ,
                enabled:  false,
                books: [],
            },
            isLoading: false,
            options: [],
            selected: [],
            newName: '',
        }
    },
    methods: {
        nameWithLang({ name, sku }) {
          this.newName = `${name} — ${sku}`;
        },
        getData(query){
            this.isLoading = true;
        axios.post('/admin/books/find/'+query)
        .then((response) => {
            this.options = response.data;
            this.isLoading = false;
        })
        .catch((error) => {
            this.isLoading = false;
        });
    },
},
watch: {
    selected (newValues) {
         this.form.books = newValues.map(obj => obj.id)
         this.nameWithLang();
    }
}

}）;

然后您可以像这样制作模板：

<multiselect v-model="selected" track-by="id" label="name" :options="options" :loading="isLoading" :internal-search="false" @search-change="getData" :multiple="true" :close-on-select="false" :hide-selected="true":internal-search="false" name="books[]" :show-labels="false" :custom-label="newName"></multiselect>

这只是您可以实现的另一种方式，也是我了解您实际想要做什么的方式。您想将带有lang值的名称传递给：custom-label吗？所以为什么不只定义一个变量，然后将值添加到变量中。因此，您只需要传递值而不是函数即可。在v-bind中，传递属性而不是方法更合适

属性未定义错误，但已定义Vue js Laravel

1 个答案: