时间戳

首页 > 解决方案 > 使用 Vue Js 根据输入使文本可编辑/只读

javascript - 使用 Vue Js 根据输入使文本可编辑/只读

问题描述

我正在尝试在给定的输入中根据 vue js 中的文本上下文使字符串可编辑或不可编辑（只读）来实现某些目标。

例如：我有一个文本：我的名字是 $John Doe$ 现在我的 vue js 代码应该迭代字符串并且 $ 之间的文本可以是可编辑的。

HTML:
<template>
     <textarea cols="10" rows="10" disabled>{{q | makeTextEditableByCondition}}</textarea>
<input type="text" v-model="editText">
</template>
<script>
    export default {
       data() {
        q : "My name is $John Doe$ from NYC,
        editText: null,
        disabled: true
     }
filters:{
  makeTextEditableByCondition(text){
      let splittedText = text.split("$");
      let this.editText = splittedText[1]
      splittedText.splice(1,1)
      return splittedText.join(" ")
    }
</script>

但它仍然使过程变得复杂，我没有达到适当的输出。

任何帮助将不胜感激

标签： javascriptvue.jsvuejs2

解决方案

很多事情都不顺利：

q : "My name is $John Doe$ from NYC",

过滤器“}”没有结束标记

...过滤器应该是纯函数，不应该依赖于这个上下文。如果您需要这个，您应该使用计算属性或仅使用方法，例如https://github.com/vuejs/vue/issues/5998

这是计算的基本解决方案：

<div id="app">
   <textarea cols="10" rows="10" disabled>{{ qComputed }}</textarea>
   <input type="text" v-model="editText">
</div>

new Vue({
  el: "#app",
  data: {
    q: "My name is $John Doe$ from NYC",
    editText: null,
    disabled: true
  },
  computed: {
    qComputed(){
      let splittedText  = this.q.split('$')
      splittedText[1] = this.editText
      return splittedText.join` `
    }
  }
})

https://jsfiddle.net/jupg4ysz/

推荐阅读