小编Bou*_*him的帖子

我想问你如何定义一个在 后执行的方法timeout？之后timeout我想执行$emit事件，但我不知道该怎么做......

<v-snackbar
  v-model="snackbar"
  :color="primary"
  :timeout="5000"
>
  {{ text }}
  <v-btn
    dark
    flat
    @click="snackbar = false"
  >
    Close
  </v-btn>
</v-snackbar>

https://vuetifyjs.com/en/components/snackbars

我的道具是这样的

house = {
  kitchen:{
    sink: ''
  }
}

我尝试过类似的事情，但没有成功。

props: {
    house: {
        type: Object,
        default: () => {
            kitchen : {
                sink: ''
            }
        }
    }
},

如何为此类对象设置默认道具？

import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'




Vue.config.productionTip = false
Vue.use(BootstrapVue);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'




Vue.config.productionTip = false
Vue.use(BootstrapVue);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

我尝试使用该命令使用 vue 绑定样式更改元素的背景颜色， v-bind:style='{backgroundColor : color} 但它不是全高，即使我尝试删除 CSS 上 body …

有一个表循环并输出来自 API 的数据。我在表格内添加了一个按钮。当你点击它时，它应该发送被点击按钮的id，直到它收到需要打​​印的函数的数据，它应该在加载中。这是我的代码。

<table id="customers">
  <tr>
    <th>{{$t('message.numberReport')}}</th>
    <th>{{$t('message.periodFrom')}}</th>
    <th>{{$t('message.periodTo')}}</th>
    <th>{{$t('message.printButton')}}</th>
  </tr>
  <tr v-for="(item,index) in getReportInfo" :key="index">
    <td>{{ item.id }}</td>
    <td>{{ item.periodFrom }}</td>
    <td>{{ item.periodTo }}</td>
    <td>
      <v-btn
        class="primary"
        :loading="loading"
        :disabled="loading"
        @click="fetchGetReportDetailed(item)"
      >{{ $t('message.printButton')}}</v-btn>
    </td>
  </tr>
</table>                    

但是当我单击特定按钮时，所有按钮都进入加载模式。我如何解决它？任何建议将不胜感激。这是视觉示例

我正在尝试为我的 vue3 应用程序的主 div 提供一个动态类。

当我使用下面的命令创建应用程序时，它会创建一个具有 id 的主 div 标签app。我可以使用 css 更改样式，但由于页面中没有它，所以我无法动态更改类。

创建应用程序的代码

const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

我想做的事

<div id="app" :class="myClass"></div>

太长了；在 v2 中，this.$refs可以完成这项工作，但在 v3 组合 api 中我该如何做到这一点？

我正在尝试在Vue3中使用PrimeVue的CustomUpload功能，但是该API在上传文件后不会清除上传文件，我需要调用clear()父组件中的子组件的方法来清除文件并刷新按钮。

这是我的 App.vue

<template>
  <FileUpload
    name="upload"
    url="/"
    mode="basic"
    :auto="true"
    :maxFileSize="26214400"
    :fileLimit="1"
    :customUpload="true"
    @uploader="upload"
  />
  <Button name="lalaal">qweeq</Button>
</template>

<script>
import FileUpload from 'primevue/fileupload'

export default {
  setup() {
    const upload = e => {
      console.log('testing', e)
    }
    return { upload }
  },
  components: {
    FileUpload
  }
}
</script>

谢谢

我使用 Vue2，但我最近尝试了 Vue 3。

我有一个简单的问题：

 <input ref="myinput" />
 <button @click="submitData" />

我想在函数“submitData”中将“焦点”设置为“myinput”。在 Vue 2 中它很简单 (this.$refs ...)，但在 Vue 3 中，它们使它变得复杂。我看到了“设置”的例子，但对我没有用+我认为你只能从元素访问“值”。

有没有办法对方法内部的元素执行“焦点”？

我正在尝试在 vue.js 3 中使用过滤器将数据过滤为大写，但是当任何过滤器出现时会出现此错误？我尝试了很多解决方案，但没有办法

main.js：

import Vue from "vue";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";

createApp(App).use(store).use(router).mount("#app");

    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount("#app");
    
    Vue.config.productionTip = false;
    
    Vue.filter('uppercase', function (v){
       return v.toUpperCase()
    });

我使用过滤器的组件：

<template>
    <div class="post-box">
        <span class="views">{{ views }}</span>
        <h3 class="title">{{title}}</h3>
        <span class="date">{{ date }}</span>
        <p class="content">{{ content }}</p>
        <div class="row">
          <div class="col-sm-6 author">
            <span class="post-author">{{author | …

我正在玩vue js和第三方API。我已经成功获取了json数据并将其呈现在html中，但是我在图像上苦苦挣扎。json文件中缺少某些图像，因此我将其本地存储在笔记本电脑中。

我试图在我的html中使用v-if设置空图像源，但没有运气。（请参阅我的html文件中的注释）

另外，我尝试为每个类分配一个类img，然后尝试img使用jquery 设置源，$("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png");但也没有运气。

我的错在哪里 也许我的方法是完全错误的，因为我是编码方面的新手，任何建议将不胜感激。先感谢您

var app = new Vue({
  el: "#app",
  data: {

    beers: [],
    decrArray: [], //array with img links
    cleanedArray: [], //without undefined
    path: 0,
    images: [missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
    "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
	"missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png"],
  created: function() {
    this.getData();
  },

  methods: {
    getData: function() {
      var fetchConfig =
        fetch("http://api.brewerydb.com/v2/beers?key=6a3ac324d48edac474417bab5926b70b&format=json", {
          method: "GET", …

我有一个触发this.$root.$emit('some-root-event')类似的组件

clickHandler: function() {
    this.$root.$emit("some-root-event", "aaaaaaaaaaaaaaaaaaaaaa");
    console.log('About $root.$emit')
}

里面的另一个组件应该捕获这个事件，但抛出一个错误：

this.$root.$on 不是函数

第二个组件的代码看起来像

mounted() {
    this.$root.$on("some-root-event", (data) => {
        console.log("About listener catch $root some-root-event"); console.log(data)
    })
}

有人可以帮助我了解问题出在哪里吗？