Question

首先，我是vue.js的新手。

当用户点击项目预览组件中的扩展器锚标记时，我尝试做的事情是项目详细信息将显示，项目预览将隐藏。现在，当项目预览显示并且我试图通过单击其自己的扩展器锚标记来切换它时，会出现问题。我对此没有错。

这是我的HTML模板。

    <script type="text/x-template" id="grid">
    <div class="model item" v-for="entry in data">
        <item-preview v-bind:entry="entry" v-if="entry.hide == 0">
        </item-preview>
        <item-details v-bind:entry="entry" v-if="entry.hide == 1">
        </item-details>
    </div>
</script>

<script type="text/x-template" id="item-preview">
        <header class="preview">
            <a class="expander" tabindex="-1" v-on:click="toggle(entry)"></a>
            <span class="name rds_markup">
                {{ entry.name }}
            </span>
        </header>
</script>


<script type="text/x-template" id="item-details">
    <div class="edit details">
        <section class="edit" tabindex="-1">
            <form action="#">
                <fieldset class="item name">
                    <a class="expander"  v-on:click="toggle(entry)"></a>
                    {{ entry.name }}
                </fieldset>
            </form>
        </section>
    </div>
</script>

这就是我在视图中调用网格组件的方式。

<grid
    :data="packages">
</grid>

我的Vue实现

var itemPreview = Vue.component('item-preview',{
    'template':"#item-preview",
    'props':{
        entry:Object
    },
    methods:{
        toggle:function(entry){
            entry.hide = !!entry.hide;
            return true;
        }
    }
});

var itemDetails = Vue.component('item-details',{
    'template':"#item-details",
    'props':{
        entry:Object
    },
    methods:{
        toggle:function(entry){
            entry.hide = !!entry.hide;
            return true;
        }
    }
});

var grid = Vue.component('grid',{
    'template':"#grid",
    'props':{
        data:Array,
    },
    components:{
        'item-preview': itemPreview,
        'item-details': itemDetails
    },
    methods:{
        toggle:function(entry){
            entry.hide = !!entry.hide;
            return true;
        }
    }
});




var vm = new Vue({
    el:'#app',
    data:{
        message:'Hello',
        packages:{}
    },

    ready:function(){
        this.fetchPackages();
    },

    methods:{
        fetchPackages:function(){
            this.$http.get(url1,function( response ){
                this.$set('packages',response);
            });
        },

    }

});

Answer 1

傻傻的我。我花了30分钟才弄清楚这段代码有什么问题。

我要做的是解决这个问题，而不是entry.hide = !!entry.hide;我在项目预览组件和项目详情entry.hide = true中使用entry.hide = false。这解决了我的问题。

v-on：单击不在子组件中工作

1 个答案: