The data value of html,vue generated dynamically using jquery is not bound, how to bind it?

//            html
<div id="app">
  <div id="c"></div>
</div>
<script id="tpl" type="text/template">
<div style="display: inline-block;">
    <input type="radio" name="payway" v-model="payway" value="wx"/>
  <input type="radio" name="payway" v-model="payway" value="zfb"/>
</div>
</script>
//            js
new Vue({
  el: "-sharpapp",
  data: {
    payway: "wx"
  },
  mounted: function(){
    $("-sharpc").html($("-sharptpl").html())
  }
})

clipboard.png
radio(data)

clipboard.png


clipboard.png

  • the generated things are not bound to the value, so how can the html generated by jquery be bound to the value?
  • or should not do this, but should do it with components? But how do components implement?

add: actually my code uses a pop-up plug-in http://layer.layui.com/

layer.open({
    type: 1,
    skin: "layui-layer-rim", //
    area: ["500px", "500px"], //
    content: $("-sharppaytpl").html() // <script type="text/template">,vuedata
});
// content: html //htmlhtml vue
Mar.07,2021

vue can operate dom?


you use a dynamic template. Except for the standard html section, the rest of the template, such as bindings and components, will not take effect. The solution is to compile first, and this requires that you use the full version of vue, instead of the runtime version of vue, and use a special tag,. Refer to this paragraph ide/components-dynamic-async.html" rel=" nofollow noreferrer "> https://vuejs.org/v2/guide/co.

in the official documentation.

however, from the logic of your code, you don't see why you need to use dynamic templates, and static templates can't?


Node under this.$refs.paytpl.$el.cloneNode (true) clone

Menu