小编rhy*_*hmo的帖子

无法在 vuetify 对话框的字符串中插入新行

我试图通过在字符串中使用 \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)

javascript vue.js vue-component vuejs2 vuetify.js

4
推荐指数
2
解决办法
9360
查看次数

无法修复警告检测到重复键:“0”。这可能会导致更新错误

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)

javascript vue.js vuex vuetify.js

4
推荐指数
1
解决办法
6378
查看次数

如何将 Vuetify 对话框标题的位置固定到顶部并使按钮始终可见

我试图在滚动时将 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)

javascript dialog vue.js vuetify.js

3
推荐指数
1
解决办法
4395
查看次数

如何在 Vue js 中设置当前时间的手表属性并启动操作

当当前时间超过预设时间戳时,我需要启动一个操作。当超过令牌过期时间时,用户需要注销。

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)

javascript time watch vue.js vuejs2

0
推荐指数
1
解决办法
2990
查看次数

标签 统计

javascript ×4

vue.js ×4

vuetify.js ×3

vuejs2 ×2

dialog ×1

time ×1

vue-component ×1

vuex ×1

watch ×1