[英]Use Vue component data in JavaScript
我们应该如何从应用程序外部访问 Vue 组件的数据? 例如,我们如何从 Vue 应用程序外部 DOM 中的按钮触发的常规 JavaScript onClick 事件中获取数据。
在下面的设置中,我有一个隐藏字段,我会随着 Vue 应用程序中的每个操作不断更新,这样我就为 JS 单击事件准备了必要的数据......但我相信有更好的方法。
目前我的设置如下:
VehicleCertificates.js
import { createApp, Vue } from 'vue'
import VehicleCertificates from './VehicleCertificates.vue';
const mountEl = document.querySelector("#certificates");
const app = createApp(VehicleCertificates, { ...mountEl.dataset })
const vm = app.mount("#certificates");
车辆证书.vue
<template>
<div style="background-color: red;">
<h3>Certificates</h3>
<div>
<table class="table table-striped table-hover table-condensed2" style="clear: both;">
<thead>
<tr>
<th><b>Type</b></th>
<th><b>Valid From</b></th>
<th><b>Valid Till</b></th>
<th style="text-align: right;">
<a href="#" @click='addCertificate'>
<i class="fa fa-plus-square"></i> Add
</a>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(certificate, index) in certificates" :key="index">
<td>{{ certificate.CertificateTypeDescription }}</td>
<td>
{{ certificate.ValidFrom }}
</td>
<td>
{{ certificate.ValidTo }}
</td>
<td>
<a href='#' @click="removeCertificate(index)" title="Delete" style="float: right;" class="btn btn-default">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr v-show="certificates.length == 0">
<td colspan="4">
No certificates added
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import axios from 'axios';
import { onMounted, ref } from "vue";
export default {
props: {
vehicleId: String
},
data() {
return {
count: 0,
certificates: ref([]),
types: []
}
},
created() {
onMounted(async () => {
let result = await axios.get("/api/v1.0/vehicle/GetCertificates", { params: { vehicleId: this.vehicleId } });
this.certificates.splice(0, 0, ...result.data);
this.certificatesUpdated();
});
},
methods: {
removeCertificate(index) {
this.certificates.splice(index, 1);
this.certificatesUpdated();
},
addCertificate() {
this.certificates.push({ CertificateTypeDescription: 'ADR', ValidFrom: 1, ValidTo: 2 });
this.certificatesUpdated();
},
certificatesUpdated() {
$("#VehicleCertificatesJson").val(JSON.stringify(this.certificates));
}
}
}
</script>
最后,我希望能够将来自 Vue 应用程序的数据与其他非 Vue 数据一起发送到 ASP.Net 核心剃须刀页面的表单中。 Vue 应用程序只是剃刀视图的特定部分,因此不是 SPA。
提前致谢!
我建议不要这样做并将所有内容都包装在 Vue 中或直接使用 JQuery,这取决于您的网站是如何构建的。 拥有多个前端框架通常是一个坏主意,并且会引入不必要的复杂性。
但是,如果您确实需要使用纯 javascript 访问 Vue 的数据,则可以使用以下命令:
const element = document.getElementById('#element-id');
element._instance.data // or element._instance.props, etc...
对于可用的属性,您可以查看检查器(请参见附加的屏幕截图)。 检查员截图
这是一个非常复杂的解决方案 - 但至少它非常灵活。
Vue.observable
存储:这不是别的,而是一个反应式对象Vue
实例中的observable
的方法watcher
:这是一个标准的Vue
对象和一个$watch
设置在它上面store
发生变化,设置回调( watcher
实例):这个回调是你可以与“外部世界”连接的地方片段:
const countervalueSpan = document.getElementById('countervalue') // creating a Vue.observable - // reactive object const store = Vue.observable({ counter: 0 }) // setting up a watcher function // using the Vue object function watch(obj, expOrFn, callback, options) { let instance = null if ('__watcherInstance__' in obj) { instance = obj.__watcherInstance__ } else { instance = obj.__watcherInstance__ = new Vue({ data: obj }) } return instance.$watch(expOrFn, callback, options) } // creating a watcher that reacts // if the given store item changes const subscriber = watch( store, 'counter', (counter) => { let html = `<strong>${counter}</strong>` countervalueSpan.innerHTML = html } ) new Vue({ el: "#app", methods: { increment() { store.counter++ } }, template: ` <div> <button @click="increment" > INCREMENT </button> </div> ` })
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <div id="outside"> Counter outside: <span id="countervalue"></span> </div> <div id="app"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.