Make Text Editable/ReadOnly Based on Input using Vue Js

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

edited Nov 13 '18 at 5:56

asked Nov 13 '18 at 5:20

Ani

285

add a comment |

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> 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:improve this question

edited Nov 13 '18 at 5:56

asked Nov 13 '18 at 5:20

Ani

285

add a comment "

... 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 '18 at 6:57

Sephyre

394

answered Nov 13 '18 at 6:57

Sephyre

394

answered Nov 13 '18 at 6:57

Sephyre

394

answered Nov 13 '18 at 6:57

Sephyre

394

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274288%2fmake-text-editable-readonly-based-on-input-using-vue-js%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt