脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue修改props数据报错

vue修改props数据报错的问题及解决

 更新时间：2024年08月29日 10:48:35   作者：小吴吴吴呀  
这篇文章主要介绍了vue修改props数据报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

修改props中的数据的问题

在 Shop.vue 组件中使用 props 的数组写法接收参数 并在 methods 中创建 add 方法 点击让商品数量加一。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <button @click="add">点击商品数量加1</button>
        <hr />
    </div>
</template>
<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    methods: {
        add() {
            this.num++;
        }
    }
}
</script>

然后在 Home.vue 页面正常引入传参 将 num 用 v-bind 绑定 避免传递字符串类型。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop name="草莓" price="99" :num="50"></Shop>
        <Shop name="苹果" price="30" :num="30"></Shop>
        <Shop name="葡萄" price="56" :num="20"></Shop>
    </div>
</template>
<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：点击后虽然商品数量能够增加 但控制台也会报错提醒 因为这么做会出现一些莫名其妙的问题 所以 Vue 不推荐直接更改 props 中的数据。

正确修改方式

如果需要修改接收到的参数 推荐在 data 中创建一个新数据接收 props 中的数据然后使用这个新数据即可。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ myNum }}</p>
        <button @click="add">点击商品数量加1</button>
        <hr />
        
    </div>
</template>
<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    data() {
        return {
            myNum: this.num
        }
    },
    methods: {
        add() {
            this.myNum++;
        }
    }
}
</script>

注：

这样就可以解决这个问题啦 因为 props 的优先级要高于 data 所以我们能在 data 中使用 props 中的数据 另外 props 的数据也是在组件实例上绑定的 所以需要用 this 调用。

需要注意 data 中的数据名不要和 props 中的数据名一样 否则会报错。

例：

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <button @click="add">点击商品数量加1</button>
        <hr />
    </div>
</template>
<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    data() {
        return {
            num: 9
        }
    },
    methods: {
        add() {
            this.num++;
        }
    }
}
</script>

注：

如果 data 和 props 中存在一样的数据名 默认会使用 props 中的数据。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vant遇到van-sidebar数据超出不能滑动的问题

    vant遇到van-sidebar数据超出不能滑动的问题

    这篇文章主要介绍了vant遇到van-sidebar数据超出不能滑动的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • nuxt.js 缓存实践

    nuxt.js 缓存实践

    这篇文章主要介绍了nuxt.js 缓存实践，nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存，本文就详细的介绍了这三种缓存，感兴趣的小伙伴们可以参考一下
    2018-06-06
  • vue3标签中的ref属性详解及如何使用$refs获取元素

    vue3标签中的ref属性详解及如何使用$refs获取元素

    这篇文章主要给大家介绍了关于vue3标签中的ref属性详解及如何使用$refs获取元素的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-11-11
  • vue3中defineEmits的使用举例详解

    vue3中defineEmits的使用举例详解

    这篇文章主要给大家介绍了关于vue3中defineEmits使用的相关资料,在Vue3中可以使用defineEmits函数来定义组件的自定义事件,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • Vue中的change事件无效问题及解决

    Vue中的change事件无效问题及解决

    这篇文章主要介绍了Vue中的change事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue关于element穿梭框进行的修改成table表格穿梭框方式

    Vue关于element穿梭框进行的修改成table表格穿梭框方式

    这篇文章主要介绍了Vue关于element穿梭框进行的修改成table表格穿梭框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue.js动态设置VueComponent高度遇到的问题及解决

    vue.js动态设置VueComponent高度遇到的问题及解决

    这篇文章主要介绍了vue.js动态设置VueComponent高度遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • axios上传文件错误:Current request is not a multipart request解决

    axios上传文件错误:Current request is not a multipart request

    最近工作中使用vue上传文件的时候遇到了个问题,下面这篇文章主要给大家介绍了关于axios上传文件错误:Current request is not a multipart request解决的相关资料,需要的朋友可以参考下
    2023-01-01
  • 一文教你彻底解决Vue3中的ResizeObserver警告

    一文教你彻底解决Vue3中的ResizeObserver警告

    这篇文章主要为大家详细介绍了介绍了Vue3中出现ResizeObserver loop completed with undelivered notifications错误的相关解决方法,有需要的小伙伴可以跟随小编一起学习一下
    2025-05-05
  • Vue2.x响应式简单讲解及示例

    Vue2.x响应式简单讲解及示例

    这篇文章主要介绍了Vue2.x响应式及简单的示例，应用了简单的源代码进行讲解，感兴趣的小伙伴可以参考一下，希望可以帮助到你
    2021-08-08

最新评论