vuejs :: Визуализировать шаблон с использованием переменных

Question

У меня есть форма, которая позволяет пользователю составлять шаблон SMS. Я хотел бы отобразить SMS, используя переменную для создания примера realisti c. Например, пользователь может ввести следующее в поле ввода (скажем, raw-input)

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

И в vueJS мы определили контекстную переменную, которая будет использоваться для визуализации примера теста.

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

Я хотел бы применить контекст к необработанному вводу, чтобы сгенерировать что-то подобное в другом поле ввода изнутри vueJS (не хочу вызывать для этого службу API)

Dear John, Thank you for your contribution of value 1.00

Answer 1

Вы можете использовать шаблонные литералы во входной строке, которые можно преобразовать в требуемый вывод. Пожалуйста, найдите фрагмент для получения дополнительной информации.

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>

Answer 2

Вы можете проанализировать необработанную строку с помощью регулярного выражения. См. Рабочий фрагмент ниже. Единственное упоминание: пользователь должен будет ввести {{username}} вместо {{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>