Vuejs2 如何在VueJS中将HTML转换为其他类型？

我的Messages.vue文件中包含以下内容：

我希望msg subject和msg body更改为输入HTML元素，以便用户可以编辑并提交它们以进行更新。我不确定用VueJS实现这种操作的最佳方法是什么

<template>
  <div>
      <div class="msg" v-for="msg in messages" :key="msg.id">
          <p class="msg-index">[{{  msg.id }}]</p>
          <p class="msg-subject" v-text="msg.subject" 
            v-show="!msg.editing"></p>
          <input type="text" name="msg-subject"
            v-model="msg.subject" v-show="!!msg.editing">
          <p class="msg-body" v-text="msg.body" 
            v-show="!msg.editing"></p>
          <input type="text" name="msg-body" v-model="msg.body"
            v-show="!!msg.editing">
          <button @click="deleteMsg(msg.id)"> Delete </button>
          <button @click="editMsg(msg.id)"> Edit </button>
      </div>
  </div>
</template>




<script>
... // your usual component code
data(){
    return{
        messages:{
            ...
            editing:false,
                }
        }
    },
methods: {
    EditMsg(id){
    this.editing = true;
    // you can do a direct axios ajax or fetch to edit the updated value
    },
    deleteMsg(id){
    // you can do a direct axios ajax or fetch to delete value
    }

}
... // remaining component code
</script>

旁注：

---

1=>不建议使用索引作为键，索引有不同的用途，您可以阅读有关使用的信息。

可能重复@HamzaMohamed不，不是。所以让我直说，当用户单击它或单击另一个按钮时，您试图更改以具有标记？以及要存储的输入，以便通过表单发送？当用户单击另一个按钮时，是的，先生。输入需要在POST请求中发送，所以是的。明白了，但我得到了一些还不清楚的东西，应该是html而不是文本？用户应该查看并添加html标记吗？还是不带标签编辑？谢谢你的回答和努力。我认为这有两个潜在的问题：1。这将切换所有消息元素的编辑标志，对吗？我只想转换相关的消息。2.我不认为msg.body可以传递给AJAX调用，因为我在console.log时它返回NULL。也许我应该写一个单独的消息组件看看我的编辑我不好，第一，如果你能直接添加编辑布尔对象并修改v-show=！！msg.editing这会更好，但是如果不可能的话，我现在会更新答案，对于第二个问题，如果用户没有更新值，你可以在发送ajax之前添加验证器。我已经尝试过了，Hamza，但它不起作用。我在这里发布了一个单独的问题，因为它包含了更多相关的细节和不同的实现。@zerohedge如果您愿意，我们可以加入聊天室并完成它，这将是非常棒的。但在此之前，你可以看看我的新问题，这将给你更多关于我的问题的细节→

<template>
  <div>
      <div class="msg" v-for="msg in messages" :key="msg.id">
          <p class="msg-index">[{{  msg.id }}]</p>
          <p class="msg-subject" v-text="msg.subject" 
            v-show="!msg.editing"></p>
          <input type="text" name="msg-subject"
            v-model="msg.subject" v-show="!!msg.editing">
          <p class="msg-body" v-text="msg.body" 
            v-show="!msg.editing"></p>
          <input type="text" name="msg-body" v-model="msg.body"
            v-show="!!msg.editing">
          <button @click="deleteMsg(msg.id)"> Delete </button>
          <button @click="editMsg(msg.id)"> Edit </button>
      </div>
  </div>
</template>




<script>
... // your usual component code
data(){
    return{
        messages:{
            ...
            editing:false,
                }
        }
    },
methods: {
    EditMsg(id){
    this.editing = true;
    // you can do a direct axios ajax or fetch to edit the updated value
    },
    deleteMsg(id){
    // you can do a direct axios ajax or fetch to delete value
    }

}
... // remaining component code
</script>