请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

自动生成的组件,ref的名字怎么自动生成?

老师,我有这么个设想,比如我有多个商品,我制作了一个商品模板,在添加商品的时候,实时显示总金额。那么这个ref的名字肯定不能一样,应该怎么处理?

<div id="app">
	<template v-for="(goods, index) in goodsList">
		<goods :ref="'goods'+index" :name="goods.goodsName"
		 :price="goods.goodsPrice"
		 @inc="add" @dec="red"></goods>
	</template>
	<h1>商品总共:{{total}}元</h1>
</div>
<script type="text/javascript">
	Vue.component('goods', {
		props: ["name", "price"],
		template: "<div><button @click='dec'>-</button>{{name}},价格:{{price}}<button @click='inc'>+</button></div>",
		methods: {
			dec() {	this.$emit('dec')},
			inc() {	this.$emit('inc')}
		}
	});
	let vm = new Vue({
		el: "#app",
		data: {
			goodsList: [{
				goodsName: "小米10",
				goodsPrice: 4999
			}, {
				goodsName: "苹果12",
				goodsPrice: 9999
			}, {
				goodsName: "华为p40",
				goodsPrice: 5999
			}],
			total: 0
		},
		methods: {
			add() {
				console.log(this.$refs)
			},
			red() {}
		}
	})
</script>

代码还没写完,因为到ref这里不知道怎么处理了。

正在回答 回答被采纳积分+3

插入代码

1回答

呀呀呀亚歌 2020-04-29 21:07:40

v-bind的形式绑定呗

v-bind:ref="data"

或者简写的形式:ref = "data"

0 回复 有任何疑惑可以回复我~
  • 提问者 惠达浪 #1
    我试过了,ref后面就是字符串,生成变量名,:ref后边可以是变量。
    但ref="goods",this.$refs.goods是一个数组,里边3个组件。
    用:ref="'goods'+index",this.$refs.goods1也是个数组,但数组里只有一个元素,使用的时候这样用:this.$refs.goods1[0].name,这是为什么?和老师讲的有些出入呢。
    回复 有任何疑惑可以回复我~ 2020-04-30 09:50:27
  • 呀呀呀亚歌 回复 提问者 惠达浪 #2
    你的ref最后还是回归到字符串啊,.$refs.str部分
    回复 有任何疑惑可以回复我~ 2020-04-30 11:22:38
  • Dell 回复 提问者 惠达浪 #3
    很有可能是版本升级造成的,没事儿,你可以自己实验一下,按照新版本的取值就可以了
    回复 有任何疑惑可以回复我~ 2020-05-03 19:43:50
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信