javascript - vue中的数据绑定

问题描述

问 题

<template>

<div class="classify-major">
    <div class="search-box"></div>
    <div class="classify-nav">
        <div class="classify-sort" @click="sortEvent" :class="{'active':this.sort===true}">{{sortData}}<i class="icon iconfont icon-tubiaojiantouxiangshang"></i></div>
        <div class="classify-filter" @click="filterEvent">筛选<i class="icon iconfont icon-tubiaojiantouxiangshang"></i></div>
    </div>
    
    <transition name="fade">
            <div class="sort-list" v-show="sort">
                <ul>
                    <li v-for="(item,$index) in items"  @click="selectIcon(item,$index)" :class="{'active':item.show===true}" >{{item.sort}}<i class="icon iconfont icon-iconfont31xuanze" v-if='item.show'></i></li>
                </ul>
                <div class="sort-mask"  v-show="sort" @click="sortMask"></div>
            </div>
    </transition>    
    
    <div class="classify-product">
        <div class="img-box">
            <img src="../../assets/images/classify_img01.png" alt="布匹">
            <p class="desc">双面妮女装扎染面料123145-18</p>
            <p class="price"> ¥ 42.50元/米</p>
            <cartconcontrol class="cartconcontrol"></cartconcontrol>
            <div class="cart"><i class="icon iconfont icon-gouwuche2"></i></div>
        </div>
        <div class="img-box">
            <img src="../../assets/images/classify_img02.png" alt="布匹">
            <p class="desc">双面妮女装扎染面料123145-18</p>
            <p class="price"> ¥ 42.50元/米</p>
            <div class="cart"><i class="icon iconfont icon-gouwuche2"></i></div>
            <cartconcontrol class="cartconcontrol"></cartconcontrol>
        </div>        
    </div>
</div>

</template>
<script>

import cartconcontrol from 'components/cartconcontrol/cartconcontrol';
export default{
    data () {
        return {
            msg: '',
            sort: false,
            sortData: this.items[0].sort,
            items: [
                    {sort: '综合排序', show: false},
                    {sort: '最新发布', show: false},
                    {sort: '价格从低到高', show: false},
                    {sort: '价格从高到低', show: false}
                ]
        };
    },
    components: {
        cartconcontrol
    },
    methods: {
        sortEvent () {
            this.sort = !this.sort;
        },
        sortMask () {
            this.sort = !this.sort;
        },
        selectIcon (item, $index) {
            item.show = !item.show;
            this.sort = !this.sort;
            console.log(this.items[$index].sort);
        },
        filterEvent () {
            this.sort = false;
            console.log('a');
        }
    }
};

</script>
想根据console.log(this.items[$index].sort);的索引得到的当前数据填充到图一的{{items[0].sort}}中，不操作DOM的情况下，使用vue该怎么实现？

解决方案

data里加个数据，绑在图一中的div那里，初始设置成初始值。然后selectIcon方法里修改此数据的值。

或者麻烦点这么写

data() {
    return {
        //...
        index: 0
    };
},
computed: {
//写到计算属性里
    sortData(){
        return this.items[this.index].sort;
    }
},
methods: {
    selectIcon(item, $index) {
        item.show = !item.show;
        this.sort = !this.sort;
        this.index = $index;
    }
{

这篇关于javascript - vue中的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！