doDelete加括号识别不出来删去括号变成doDelete就好了

Question

​
1doDelete加括号识别不出来
​

​
删去括号变成doDelete就好了

​

<template>
    <view class="address-list">
            <view class="flex-item">
                <u-swipe-action
                :show="item.show" :index="index"
                    v-for="(item, index) in list" :key="item.id" 
                    @click="doDelete()" 
                    @open="open"
                    :options="options"
                    >
                    <view :id="'address'+item.id" class="address-li"  :key="item.id">
                <text class="address-price">联系人:{{item.name}} </text><br>
                <text class="address-sold">收货地址:{{item.address}}</text><br>
                <text class="address-sold">手机号:{{item.phone}}</text><br>
                <hr>
                <u-switch v-model="item.status">缺省选用</u-switch>
                 </view> 
            
                    </u-swipe-action>
            
        
        </view>
                <view>
                    <u-button type="error" shape="circle"  >提交</u-button>
                </view>
        
    </view>
    
</template>

<script>
    import {
        apiaddresssList
    } from '../../api/mock.js'
    export default {
        data() {
            return {
                list: [],
                loading: true,
                options: [
                    {
                        text: '删除',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }
                ],
            }

        },
        
        
        created() {
            let that = this;
            uni.showLoading({
                title:"jiazaizhong"
            })
            apiaddresssList(1, 10, '').then(res => {
                that.list = res;
                uni.hideLoading();
                console.log(that.list)
                
            }).catch(() => {
                //联网失败, 结束加载
                this.mescroll.endErr();
                    uni.hideLoading();
                    uni.showToast({
                        title:"网络异常",
                        duration:1000,
                        
                    })
            })
        },
        methods: {
        doDelete(index, index1) {
            // console.log(this.list[index].address)
            console.log(this.list[index])
            console.log(this.list)
            let address=this.list[index].address;
            
            let that=this;
            uni.showModal({
                title:'提示',
                content:'当前操作不可恢复,确认删除地址['+address+']吗',
                success:function(res){
                    if(res.confirm)
                    {
                        that.list.splice(index, 1);//指定位置删除一个
                        that.$u.toast(`删除了第${index}个商品`);//确认
                    }else if(res.cancel)
                    console.log('用户点击取消');
                }
            })
        
        },
        open(index) {
            // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
            // 原本为'false'，再次设置为'false'会无效
            // console.log('open>>',index)
            console.log('open>>',index)
            this.list[index].show = true;
            this.list.map((val, idx) => {
                console.log('oppp>>>', val, '>>>>',idx)
                if(index != idx) {
                    thislist[idx].show = false
                }
            })
        },
        }
    }
</script>

<style lang="scss">
    .address-list {
        background-color: #fff;

        .address-li {
            display: flex;
            align-items: center;
            padding: 20upx;
            border-bottom: 1upx solid #eee;

            .address-img {
                width: 160upx;
                height: 160upx;
                margin-right: 20rpx;
            }

            .flex-item {
                flex: 1;

                .address-name {
                    font-size: 26upx;
                    line-height: 40upx;
                    height: 80upx;
                    margin-bottom: 20upx;
                    overflow: hidden;
                }

                .address-price {
                    font-size: 26upx;
                    color: red;
                }

                .address-sold {
                    font-size: 24upx;
                    margin-left: 16upx;
                    color: gray;
                }

            }
        }
    }
</style>

2.他不是计算属性呀,不带括号的方法到底是什么,没弄懂
传对象与不传对象吗
Vue.js 计算属性
计算属性关键词: computed。

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在您遇到的问题中，关于doDelete方法的调用问题，主要涉及到JavaScript中方法调用的语法规则以及Vue.js框架中的事件处理机制。

1. 方法调用的语法规则

在JavaScript中，方法调用的基本语法是将方法名作为函数，后面跟着一对圆括号()，其中可以包含参数。例如，doDelete()表示调用doDelete方法。

2. Vue.js中的事件处理

在Vue.js框架中，事件处理通常使用v-on指令来实现。当用户触发某个事件（如点击按钮）时，Vue.js会根据v-on指令绑定的事件处理器来执行相应的方法。例如，@click="doDelete()"表示当用户点击时，会调用doDelete方法。

3. 问题的原因

当您在@click指令中使用doDelete()时，如果doDelete方法内部访问了this.list[index].address，并且this.list或index是undefined，那么就会出现“Cannot read properties of undefined (reading 'address')”的错误。

4. 解决方法

• 确保this.list和index在doDelete方法中是可用的。这通常意味着您需要在组件的data函数中定义list属性，并确保在调用doDelete方法时，this.list和index都有有效的值。
• 使用箭头函数：在Vue.js中，使用箭头函数可以避免this的上下文问题。例如，@click="() => doDelete(index)"。

5. 计算属性computed

计算属性是Vue.js中的一种特殊属性，它基于它们的依赖进行缓存。计算属性会像观察者一样工作，只有当它们的依赖发生变化时，计算属性才会重新计算。计算属性的声明方式如下：

computed: {
  computedProperty: function() {
    return this.someProperty * 2;
  }
}

计算属性的特点是：

• 依赖缓存：只有当计算属性依赖的响应式数据发生变化时，计算属性才会重新计算。
• 默认返回：计算属性默认返回其依赖的响应式数据。
• 可以读取数据：计算属性可以读取其他响应式数据。

示例

假设您有一个列表，您希望在列表项被点击时删除该项，您可以这样实现：

<template>
  <view class="address-list">
    <view class="flex-item">
      <u-swipe-action
        :show="item.show"
        v-for="(item, index) in list"
        :key="item.id"
        @click="doDelete(index)"
        @open="open"
        :options="options"
      >
        <view :id="'address'+item.id" class="address-li" :key="item.id">
          <text class="address-price">联系人:{{item.name}}</text><br>
          <text class="address-sold">收货地址:{{item.address}}</text><br>
          <hr>
          <u-switch v-model="item.status">缺省选用</u-switch>
        </view>
      </u-swipe-action>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          // 假设这是您的列表数据
          { id: 1, name: '张三', address: '北京市', phone: '1234567890' },
          // 更多数据...
        ],
        options: [
          // 选项数据...
        ]
      }
    },
    methods: {
      doDelete(index) {
        // 确保this.list和index是可用的
        if (this.list[index].address) {
          // 执行删除操作...
        }
      },
      open(index) {
        // 执行打开操作...
      }
    }
  }
</script>

在这个示例中，doDelete方法使用箭头函数来确保this的上下文是正确的，并且当index是undefined时，它不会抛出错误。

希望这些解释和示例能帮助您理解问题的原因以及如何使用计算属性。如果您有更多关于Vue.js的问题，欢迎继续提问。