v-if에서 메서드 함수 사용

v-if에서 메서드 함수 사용

vue 템플릿과 같은 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]])"

이것을 하는 올바른 방법은 무엇일까요?

도와줘서 고맙습니다.

이 비교를 없애려면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>

좋습니다. 개선될 수 있지만, 이 문제를 해결하는 방법은 다음과 같습니다.

나의 리스트 컴포넌트는 사용 가능한 권한의 참조 리스트를 제시하여 역할의 권한과 비교 목록을 수신합니다.따라서 비교가 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>

간단한 답은 계산된 속성을 사용하는 것입니다. 계산된 속성에 매개 변수를 전달할 수는 없지만 구성 요소의 상태와 상호 작용할 수는 있습니다.

메서드가 부울을 반환하는 경우 사용할 수 있습니다.

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

심플하고 깔끔한

언급URL : https://stackoverflow.com/questions/48479666/using-method-function-in-v-if