Question

这是我想做的基本设置：

HTML边

test.html

char

Vue Side

app.js：

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

myComp.vue

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

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

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

<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>

出现在输入中。从技术上讲，我的表单不响应现有数据。我该怎么解决？

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

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

更改静态模板中的值

2 个答案: