带有innerhtml的Vuejs
Posted
技术标签:
【中文标题】带有innerhtml的Vuejs【英文标题】：Vuejs with innerhtml 【发布时间】：2022-01-13 07:06:51 【问题描述】：有一个过滤页面。
|过滤器 | |内容 |
过滤器在视图中，最初显示的内容是 Ruby。如果选择了过滤器，则应删除（隐藏）Ruby 模板，并滚动来自 api 的内容（通过 axios 获取）。
试过这样：
document.querySelector('.shop-content__grid').innerhtml = `
<div @click='this.testBtn'>Test</div>
`;
是的，它会删除内部内容，但不会作为视图读取。有合法的方法可以做到这一点吗？或者有没有其他方法可以解决这个问题？
【问题讨论】：
你可能需要花一些时间阅读 VueJS 2。如果整个东西是一个 Vue 应用程序，你永远不会使用文档选择器。如果您仅将 Vue 用于常规 HTML 页面中的一个或两个组件，那么您可能必须将 Vue 组件“渲染”到相应的 Div 中。 @Teddythen you may have to "render" the Vue component into the respective Div. 是什么意思？是的，我在 HTML 中将 vue 用于 1-2 组件。
【参考方案1】：
如果它是一个成熟的 Vue 应用程序，那么你的想法是错误的。您甚至很少在 Vue 应用程序中使用文档选择器。
如果它只是一个使用一两个简单 Vue 组件的 HTML 页面，那么您可能必须提供元素选择器并提供数据来定义 Vue 组件并将其渲染到现有的 HTML 元素中。
例如：
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : firstname</h1>
<h1>Lastname : lastname</h1>
<h1>mydetails()</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
vue_instance.js
var vm = new Vue(
el: '#vue_det',
data:
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
,
methods:
mydetails : function()
return "I am "+this.firstname +" "+ this.lastname;
)
参考： https://vuejs.org/v2/guide/#What-is-Vue-js
还有这个教程： https://www.tutorialspoint.com/vuejs/vuejs_instances.htm
在上面的示例中，您在组件定义本身中提供目标元素、数据和方法。
如果数据发生变化，您可能需要重新创建组件。
与此不同的是，如果组件侦听事件总线，则无需再次渲染组件 - 您可以将数据从外部传递（或发出）到组件，然后它会重新渲染自己。
这是一个简单的事件总线示例： https://andrejsabrickis.medium.com/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860
【讨论】：
以上是关于带有innerhtml的Vuejs的主要内容，如果未能解决你的问题，请参考以下文章
在带有 innerHTML 的 Javascript 中使用引号