vuejs :: Render template using variables

Question

I have a form that allows a user to draft an SMS template. I'd like to render the SMS using a variable to generate a realistic example. For example, a user may type the following into an input box (say raw-input)

Dear {{context.username}}, Thank you for your contribution of value {{context.amount}}

And in vueJS we have defined the context variable to be used to render the example test.

data() {
 return {
  render_sms: "",
  context: {
    amount: "1.00",
    first_name: "John",
    last_name: "Doe",
  }
};

I would like to apply the context to the raw-input to generate something like this in another input box from within vueJS (don't want to call an API service for this)

Dear John, Thank you for your contribution of value 1.00

Stark Buttowski · Accepted Answer · 2020-07-10 16:51:29Z

1

You can use template literals in the input string which can be converted to the required output. Please find the snippet for further details.

new Vue({
  el: "#app",
  data: () => ({
    custInput: 'Dear ${context.first_name}, Thank you for your contribution of value ${context.amount}',
    custOutput: '',

    context: {
      amount: "1.00",
      first_name: "John",
      last_name: "Doe",
    }
  }),
  methods: {
    convert: function() {
      this.custOutput = Function('return function(context){ return `' + this.custInput + '`}')()(this.context)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" style="display:flex;justify-content:space-between">
  <h3>Input</h3>
  <textarea v-model="custInput"></textarea>
  <button @click="convert">Convert</button>
  <h3>Output</h3>
  <textarea v-model="custOutput"></textarea>
</div>

edited Jul 10, 2020 at 16:51

answered Jul 10, 2020 at 16:05

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

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

4 Comments

Lmwangi Over a year ago

Interesting answer, Could you share a snippet of the template to use? I have tried "Dear {context.first_name}, Thank you for your contribution of value {{amount}}". That doesn't work

Lmwangi Over a year ago

Ah, I see CustInput is already set... Is there anyway to get rid of '${', the input string will be passed to a backend API service that will use it as a jinja template. Hence custInput has to be acceptable to Jinja

Lmwangi Over a year ago

One option is to use regex to change {{ var }} => ${ var }. This seems to work "Dear ${context.first_name}, ".replace(/{{/,'${').replace("}}","}")

Stark Buttowski Over a year ago

Since you told you dont want to pass it to api, i suggested template literals. You parse and get the string back. Send the string to backend

Igor Moraru · Accepted Answer · 2020-07-10 15:51:56Z

You can parse the raw string with regex. See the working snippet below. The only mention is that the user will have to type {{username}} instead of {{context.username}}.

Dear {{username}}, Thank you for your contribution of value {{amount}}

const app = new Vue({
  el: '#app',
  data(){
    return {
      raw_text: '',
      context: {
        username: 'John',
        amount: 1000
      }
    }
  },
  computed: {
    output_text(){
      return this.raw_text.replace(/{{\s*(\w+)\s*}}/g, (match, capt) => {
        return this.context[capt]
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<label for='raw'>Raw input</label>
<input v-model='raw_text' type="text" id='raw' />
<label for='output'>Output</label>
<input v-model='output_text' type="text" id='output' />
</div>

Collectives™ on Stack Overflow

vuejs :: Render template using variables

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related