Лучший способ визуализировать переменные внутри html, которые вы получаете от API в VueJS

Question

Итак, используя VueJS, я получаю содержимое html из моего api, я хочу отобразить его где-нибудь в моем представлении, а затем изменить то, что находится внутри двойных фигурных скобок, например {{title}}, я знаю, что v-html делает только рендеринг html не какой-либо переменной или около того, я попытался заменить его на js (заменить, сопоставить и прочее), так как я знаю свое регулярное выражение, и оно работало нормально, но дело в том ... Я хочу, чтобы он был доступен для редактирования пользователем в моем веб-приложении, например, когда пользователь вводит какое-то значение в определенные поля, оно меняет соответствующее значение в html, которое Im визуализирует, которое изначально поступило из api, и, наконец, отправляет их обратно, чтобы они были в db (в настоящее время я помещаю значение и замените его некоторой строкой по умолчанию, чтобы иметь возможность показать что-то вменяемое с помощью директивы v-html), я предлагаю вам лучшие практики и ваши идеи здесь ppl, заранее спасибо ...

* Мне нужно получить количество ценностей в {{усы}} и возможность редактировать только те, которые не целиком html

Answer 1

Вы можете просто сохранить значение в свойстве данных. А затем измените его, как хотите, с помощью метода ввода и т. Д. c:

Демо: https://codepen.io/aQW5z9fe/pen/vYLyYXo?editors=1011

Код

<textarea
  @input="inputEventHandler"
  v-model="htmlData"
  placeholder="HTML data"
></textarea>

<div v-html="htmlData"></div>

data () {
  return {
    htmlData: ''
  }
},
mounted () {
  // Get data from API
  this.htmlData = this.getData()
},
methods: {
  getData () {
    return 'Data from API'
  },
  inputEventHandler (event) {
    console.log(event)
  }
}