Question

我正在尝试在v-if模式中使用v-if指令中的函数

    <template>

    <ul class="list-group">
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div v-for="col in colss" class="" :class="bootstrapClass">{{col | capitalize}}</div>
            </div>
        </li>

        <li v-for="item in datas[collectionsindatas['reference']]" class="list-group-item">
            <div class="row">
                <div v-for="property in columns.slice(0,(columns.length))" class="" :class="bootstrapClass">{{ item[property] }}</div>

                <div v-if="compareCollections(item[comparecol],datas[collectionsindatas['compare'][comparecol]])" class="" :class="bootstrapClass">
                    OK
                </div>
                <div v-else class="" :class="bootstrapClass">!!NOK!!</div>

            </div>

        </li>
    </ul>

</template>

我的方法是这样的：

methods:{
compareCollections:function(reference,compare){
                if(compare!='undefined'  && compare!=''){
                    if(compare===reference){
                        return true;
                    }
                    return false;
                }
                return false;
            },
}

它失败并显示以下消息：[Vue warn]：属性或方法未在实例上定义，但在呈现期间引用

使用一种方法而不是在v-if指令中编写许多丑陋的东西，比如

，这让我自己变得更好了

v-if="datas[collectionsindatas['compare'][comparecol]]!='undefined'&&(item[comparecol]===datas[collectionsindatas['compare'][comparecol]])"

这样做的正确方法是什么？

感谢您的帮助

Answer 1

为了摆脱v-if中的这种比较，我会使用带有参数的组件。在组件中，您可以使用computed计算值并提供它们。您不必将任何参数传递给computed，因为它们已经是组件的参数：

<template>
  <div>
    <div v-if="compEqRef" class="" :class="bootstrapClass">
      OK
    </div>
    <div v-else class="" :class="bootstrapClass">!!NOK!!</div>
  </div>
</template>

<script>
  export default {

    methods: {
      compareCollections(reference, compare) {
        return (compare !== 'undefined' && compare !== '' && compare === reference);
      }
    },

    computed: {
      compEqRef() {
        const left = this.item[this.comparecol];
        const right = this.datas[this.collectionsindatas['compare'][this.comparecol]];

        return this.compareCollections(left, right);
      }
    },

    props: {
      item: {
        required: true
      },
      datas: {
        required: true
      },
      comparecol: {
        required: true
      },
      collectionsindatas: {
        required: true
      }
    }
  }
</script>

Answer 2

好的，它可以改进，但这是解决这个问题的方法：

我的列表组件通过道具接收可用权限的参考列表，并接收角色权限的比较列表，因此当比较返回true时，它将显示一个切换开关，它出现在ON位置，如果为false，则显示OFF。所以这是app.js：

Vue.component('sort-table', sortTable);
Vue.component('list-items', listItems);

var csrf_token = $('meta[name="csrf-token"]').attr('content');

var newTable = new Vue({
    el: '#appTableRoles',
    data: {

        columns: ['id', 'name', 'description', 'action'],
        cols: ['Id', 'Rôle', 'Description', 'Actions'],
        // ajax url
        url: 'Role/ajaxQuery',

    },
    components: {sortTable},

});

var listTable = new Vue({
    el: '#listmodal',
    data: {
        // collection des propriétés
        columns: ['id', 'name', 'description'],
        // collection d'affichage
        colss: ['Id', 'Nom', 'Description', 'Attribution'],
        urlajax:'',
        datas:[],
        //
        collectionsInDatas:{'reference':'allPermissions','compare':'rolePermissions'},
        // critère de comparaison entre la collection de référence et la collection appartenant à l'item
        comparecol:'name',
        //objet contenant tous les résultats de comparaisons
        lastcol:{equal:[],display:[]},

    },
    methods: {
        showModal () {
            $('#permissionsModal').modal('show');
        },
        hideModal () {
            $('#permissionsModal').modal('hide');
        },

        getDatas(){

            this.lastcol.equal =[];
            this.lastcol.display =[];

            MonThis = this;
            $.ajax({
                url: this.urlajax,
                cache: false,
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    if (jqXHR.status === 200) {
                        //console.log(data);
                        MonThis.datas = data;
                        var index=0;
                        //console.log(MonThis.datas[MonThis.collectionsInDatas['reference']]);
                        for(item in MonThis.datas[MonThis.collectionsInDatas['reference']]){

                            //var index = MonThis.datas[MonThis.collectionsInDatas['reference']].indexOf(item);
                            //console.log('index : '+index);

                            console.log('reference name : '+MonThis.datas[MonThis.collectionsInDatas['reference']][index]['name']);
                            //console.log('compare : '+MonThis.datas[MonThis.collectionsInDatas['compare']][index]);

                            var j = 0;
                            for(compare in MonThis.datas[MonThis.collectionsInDatas['compare']]){

                                //console.log('compare name : '+MonThis.datas[MonThis.collectionsInDatas['compare']][j]['name']);

                                if(MonThis.datas[MonThis.collectionsInDatas['compare']][j]['name']===MonThis.datas[MonThis.collectionsInDatas['reference']][index]['name']){
                                    MonThis.lastcol.equal.push(true);
                                    MonThis.lastcol.display.push('OK');
                                    break;
                                }else{
                                    MonThis.lastcol.equal.push(false);
                                    MonThis.lastcol.display.push('Not OK');
                                }
                                j++;

                            }

                            index++;
                        }
                    }
                }
            });
        },


    },
    components:{listItems},

});

$(document).ready(function () {

    $(document).on('click', '.modal-permissions', function (e) {
        //console.log($(e.target).attr('href'));
        listTable.showModal();
        listTable.$data.urlajax = $(e.target).attr('href');
        listTable.getDatas();

    });

});

以下是刀片模板中的组件调用：

<list-items :colss="colss":columns="columns"
            :urlajax="urlajax"
            :datas="datas"
            :lastcol="lastcol"
            :collectiondatas="collectionsInDatas">
</list-items>

以下是vue文件代码：

    <template>

    <ul class="list-group">
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div v-for="col in colss" class="" :class="bootstrapClass">{{col | capitalize}}</div>
            </div>
        </li>

        <li v-for="(item,index ) in datas[collectiondatas['reference']]" class="list-group-item">
            <div class="row">
                <div v-for="property in columns.slice(0,(columns.length))" class="" :class="bootstrapClass">{{
                    item[property] }}</div>


                <div class="" :class="bootstrapClass">{{ lastcol.display[index] }}</div>

            </div>

        </li>
    </ul>

</template>

<script>

    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    export default {

        name: 'listItems',

        data(){
            return {


            }
        },

        props: ['colss','columns','lastcol','urlajax','datas','collectiondatas'],

        methods: {



        },

        computed: {
            bootstrapClass: function() {
                return 'col-sm-' + (12 / this.colss.length );
            },


        },

        mounted: function () {


        },

        filters: {

            capitalize: function (str) {
                return str.charAt(0).toUpperCase() + str.slice(1)
            }

        },

    }
</script>

Answer 3

简单的答案是使用computed properties，您将无法将参数传递给计算的属性，但可以与组件的状态进行交互。

Answer 4

如果您的方法返回布尔值，则可以使用

v-if="!!compareCollections(params)"

简单干净

在v-if中使用方法函数

4 个答案: