Appearance
项目需求:
循环渲染笔记列表,修改当前笔记时,隐藏当前笔记在当前笔记原位置呈现文本框,保存按钮和取消按钮。当前笔记修改成功更新笔记列表;取消修改,隐藏当前文本框,保存按钮和取消按钮,呈现原有笔记。
循环渲染模版文件:
在 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;
}
}