Make Text Editable/ReadOnly Based on Input using Vue Js

Question

I am trying to achieve something where in a given input I make the string editable or non editable(readonly) based on the context of the text in vue js.

For example : I have a text: My Name is $John Doe$ Now my vue js code should iterate the string and the text between $ can be editable.

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>

But It's still making the process complicated and I am not achieveing proper output.

Any help will be hightly appreciated

Sephyre · Accepted Answer · 2018-11-13 06:57:00Z

2

many things are not going well :

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

Not ending tag for your filters "}"

... Filters should be pure functions and should not be dependent on this context. If you need this you should use a computed property or just a method e.g. https://github.com/vuejs/vue/issues/5998

Here a basic solution with computed :

<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/

answered Nov 13, 2018 at 6:57

Sephyre

4466 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make Text Editable/ReadOnly Based on Input using Vue Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related