我們應該如何從應用程式外部訪問 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。
提前致謝！
uj5u.com熱心網友回復：
這是一個非常復雜的解決方案 - 但至少它非常靈活。
- 創建一個
Vue.observable商店：這不是別的，而是一個反應式物件 - 創建要用來更新的方法，
observable在你的Vue情況下 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/[email protected]/dist/vue.js"></script>
<div id="outside">
Counter outside: <span id="countervalue"></span>
</div>
<div id="app"></div>您始終可以store輕松地從外部訪問物件（例如store.counter），并且您始終可以獲取物件的當前狀態。觀察者需要自動對變化做出反應。
uj5u.com熱心網友回復：
我建議不要這樣做并將所有內容都包裝在 Vue 中或直接使用 JQuery，這取決于您的網站是如何構建的。擁有多個前端框架通常是一個壞主意，并且會引入不必要的復雜性。
但是，如果您確實需要使用純 javascript 訪問 Vue 的資料，則可以使用以下命令：
const element = document.getElementById('#element-id');
element._instance.data // or element._instance.props, etc...
對于可用的屬性，您可以查看檢查器（請參見附加的螢屏截圖）。 檢查員截圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/332929.html
標籤：javascript Vue.js asp.net核心