Skip to content

项目需求:

循环渲染笔记列表,修改当前笔记时,隐藏当前笔记在当前笔记原位置呈现文本框,保存按钮和取消按钮。当前笔记修改成功更新笔记列表;取消修改,隐藏当前文本框,保存按钮和取消按钮,呈现原有笔记。

循环渲染模版文件:

ref 上动态绑定数据,格式为:字符串 + 索引。

<li class="fs14 list-line pt10 pb5" v-for="(item, index) in noteList" :key="item.id">
		<div v-show="index == item.open">
			<p class="ellipsis mb5 fs16 lGray">{{ item.content }}</p>
		</div>
		<div v-show="index == curr">
			<textarea :value="item.content" :ref="\'note\'+index"></textarea>
			<p class="tar">
				<span class="mr10" @click="updateNote(item, index)">确定</span>
				<span @click="handleCancelUpdate(item, index)">取消</span>
			</p>
		</div>
	</li>
<li class="fs14 list-line pt10 pb5" v-for="(item, index) in noteList" :key="item.id">
		<div v-show="index == item.open">
			<p class="ellipsis mb5 fs16 lGray">{{ item.content }}</p>
		</div>
		<div v-show="index == curr">
			<textarea :value="item.content" :ref="\'note\'+index"></textarea>
			<p class="tar">
				<span class="mr10" @click="updateNote(item, index)">确定</span>
				<span @click="handleCancelUpdate(item, index)">取消</span>
			</p>
		</div>
	</li>

根据 ref 获取当期的 textarea 值;打印输出 ref 是一个数组,根据数组特性输出每一个 textarea

methods: {
		updateNote: function(item, index) {
			var content = this.$refs['note'+index][0].value;
		}
	}
methods: {
		updateNote: function(item, index) {
			var content = this.$refs['note'+index][0].value;
		}
	}