html - 更改静态模板中的值

Question

这是我想做的基本设置：

HTML 端

测试.html

<div id="app">
    <my-comp temp="1" cat="{ name:'Geoff', age:3 }"></my-comp>
</div>

Vue 端

应用程序.js：

import myComp from './components/myComp.vue'

app = new Vue({
    el: "#app",
    components: {
        myComp
    }
});

myComp.vue

<template>
    <div v-html='template'>
    </div>
</template>

<script>
    export default {
        props: [
            'temp',
            'cat'
        ],
        data () {
            temp1: `<input name="name" value="cat.name">
                    <input name="age" value="cat.age">`,
            // other template
            // ...

        },
        computed: {
            template() {
                return this.temp == 1 ? this.temp1 : this.temp2;
            }
        }
    }
</script>

我的问题是当我在浏览器中打开 html 文件时，我得到：

cat.name
cat.age

出现在输入中。从技术上讲，我的表单不响应现有数据。我该如何解决这个问题？

Answer 1

在你的 test.html 你必须改变这个：

<my-comp :temp="1" :cat="{ name:'Geoff', age:3 }"></my-comp>

必须添加双点，否则它将被解释为字符串而不是对象。

与value您一起走在正确的轨道上。你唯一需要改变的是因为你想在你的“字符串”中插入一个变量

  data() {
    return {
      temp1: `<input name="name" value="${this.cat.name}">
              <input name="age" value="${this.cat.age}">`
    }
  }

Answer 2

不要忘记添加“输入类型”。