我试图通过在字符串中使用 \n 在作为 Vuetify 对话框文本的字符串中插入一个新行。但它不起作用。
这是调用 Vuetify 对话框的函数的代码
handleDialog()
{
this.dialogHeading = "Clearing all component data"
this.dialogText = "Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!"
this.dialogBtn1 = "Cancel"
this.dialogBtn2 = "Yes"
this.isDialog = true
}Run Code Online (Sandbox Code Playgroud)
这是显示 Vuetify 对话框的代码
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialog" persistent max-width=400>
<v-card>
<v-card-title class=" error title white--text
darken-2 font-weight-bold">{{dialogHeading}}
</v-card- title>
<v-card-text>{{dialogText}}</v-card-text>
<v-card-text v-if="dialogText2">{{dialogText2}}
</v-card-text>
<v-card-actions >
<v-btn v-if="dialogBtn1" flat …Run Code Online (Sandbox Code Playgroud)Vue js 抛出一条警告,指出 vue.runtime.esm.js?2b0e:619 [Vue 警告]:检测到重复键:'0'。这可能会导致更新错误。
我尝试在计算变量中使用 getter 和 setter 并将值分派到 Vuex 存储。
这是 html 元素的代码
<!-- Displaying Sample TappingPessure input field-->
<v-layout
wrap row
class="text-xs-left mx-auto pt-2"
style="height:50px;" >
...some code
<v-flex xs12 md1 sm1 class="ma-0 pa-0"
>
<v-text-field
class="myfont1 inputValue"
name="pressure"
id="pressure"
required
v-model="tappingPressure"
type="number"
reverse
style="max-width:70px;"
>
</v-text-field>
</v-flex>
...some code
</v-layout>
Run Code Online (Sandbox Code Playgroud)
这是计算变量的代码
tappingPressure:{
get () {
return this.$store.getters.tappingPressure
},
set (value) {
this.$store.dispatch('setTappingPressure',{data:value})
}
},Run Code Online (Sandbox Code Playgroud)
这是更新变量的vuex代码
import Vue from 'vue'
import Vuex from 'vuex'
import '@/firebase/init.js' …Run Code Online (Sandbox Code Playgroud)我试图在滚动时将 Vuetify 对话框标题和内容的标题保持在顶部。我使用了“样式:”位置:固定。当我滚动时,标题和标题不在视图中。当前代码如下
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialogTips" max-width=800>
<v-card>
<v-card-title
class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
{{dialogTipsHeading}}</v-card-title>
<!-- Displaying Tips matrix Headers-->
<v-layout
v-if="dialogTableOn"
row wrap
class="text-xs-center mx-auto pt-2 justify-space-between teal--text darken-4 "
style="width:600px;"
>
....
Table Headers
....
</v-layout>
....
some Table of content
....
<!-- Diplaying dialog buttons -->
<v-layout
>
<v-card-actions
class="text-xs-center mx-auto justify-space-around">
<v-btn v-if="dialogTipsBtn1" class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text @click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
<v-btn v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark …Run Code Online (Sandbox Code Playgroud)当当前时间超过预设时间戳时,我需要启动一个操作。当超过令牌过期时间时,用户需要注销。
currentTime这是定义的计算属性
computed: {
currentTime() {
return Date.now();
},
}
Run Code Online (Sandbox Code Playgroud)
这是 currentTime 的观察者代码
watch: {
async currentTime(newValue, oldValue) {
// Log user out when current time exceeds the token expiry time
// Getting token ExpiryTime
if (localStorage.getItem("scatTokenExpiryTime")) {
const tokenExpiryTime = localStorage.getItem("scatTokenExpiryTime");
const timeRemainingInMinutes = moment.duration(
tokenExpiryTime - newValue,
"millisecond"
).asMinutes;
// Logging out user
if (newValue > tokenExpiryTime) {
await this.$store.dispatch("logoutUser");
}
//Dialogs for warning the user about auto-logout before 30, 5 and 1 min
else if (timeRemainingInMinutes …Run Code Online (Sandbox Code Playgroud)