小编Bou*_*him的帖子

我有兴趣在 Vue.js v3 发布之前更深入地了解它。某处是否有（WIP）API 文档？像这个：

https://vuejs.org/v2/api/

我只能找到一些文章和半官方出版物。尝试了这个存储库，但没有名为dev 之类的分支。

我知道它仍在进行中，但仍然没有内部保存的文档吗？

我想弄清楚如何让我的动态生成的按钮在 for 循环中每个都有一个单独的加载程序。Vuetify 有带加载器的按钮。

我遇到的问题是，当这些按钮处于 for 循环中并被单击时，它们都会显示加载指示器。我只想要点击显示加载指示器的那个。

HTML：

<div v-for="(item, i) in items" :key='i'>

<v-btn 
dark 
color="pink"
:loading="loading"
@click="loader = 'loading'"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

脚本

data () {
      return {
        loader: null,
        loading: false
      }
    },

假设我有 3 个项目。上面的代码将生成三个按钮，但它们都将共享相同的加载参数。我怎样才能让每个按钮使用它唯一的加载参数？与往常一样，非常感谢任何和所有帮助。

所以几年前这是不好的做法

array = [];

因为如果数组在某处被引用，该引用没有更新或类似的东西。

正确的方法应该是 array.length = 0;

反正现在javascript已经更新了，有个框架叫Vue.js

Vue 不会捕获， array.length = 0;因此该属性不会是响应式的。但它确实抓住了array = [];

我的问题是，我们现在可以使用 array = [];，还是 javascript 仍然损坏？

.prevent动态使用v-on的修饰符时如何使用？

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on="overlayClickClosesModal ? { click: () => closeModal() } : {}"
/>

我正在尝试阻止附加 URL/#

我试过了

v-on.prevent

v-on:prevent

v-on="overlayClickClosesModal ? { 'click.prevent':

在Vue实例中，我有一个名为“ block”的数组，其中包含4个值。我用v-for将此数组渲染为DOM：

<div class="block" @click="shuffleArray()">
    <div v-for="(number, index) in block">
        <span :class="[`index--${index}`]">{{ number }}</span>
    </div>
</div>

这会创建一个内部有4个跨度的div，每个跨度都有一个“ index--0”，“ index--1”等类。

单击时，数组的值更改顺序：

shuffleArray: function() {
    const shifted = this.block.shift();
    this.block.push( shifted );
}

尽管值确实发生了变化，但它们并未在实际的DOM中移动，如何在单击时实现跨度实际上在DOM中的位置变化？每个跨度都有适用的样式，因此我想用视觉表示值确实会改变顺序：

    span.index--0 {
        background-color: tomato;
    }

    span.index--1 {
        background-color: khaki;
    }

    span.index--2 {
        background-color:lavenderblush;
    }

    span.index--3 {
        background-color: lightcoral;
    }

也许有不需要CSS的纯CSS解决方案。

我一直在关注他们网站上的官方 VueJS 路由器文档：. 我现在面临的问题是，它会自动将我重定向到 url: http://127.0.0.1:8080/#/，尽管我输入了 URL: http://127.0.0.1:8080/。

当我点击一个按钮，即设置一个新的URI对我来说，像这样同样出现：http://127.0.0.1:8080/#/foo。当我按下按钮时会发生这种情况，这应该让我到达那里。

如果我打开 URL：http://127.0.0.1:8080/foo它会自动将我的 URL 重写为http://127.0.0.1:8080/foo#/.

其他一切仍然有效，并且正在呈现路由器视图，但是对于用户而言，如果没有烦人的 # 来体验该站点肯定会很好。

如前所述，我确实遵循了 VueJS 文档，但我对某些内容进行了一些更改。但是，这些不会影响错误。

这是我的 main.js 文件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import AnotherComponent from './components/AnotherComponent.vue';

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

const routes = [
    { path: '/foo', component: AnotherComponent }
];

const router = new VueRouter({
    routes
});

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

这是我的 App.vue …

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

这是显示 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 …

我正在开发一个项目，我希望能够打印页面的特定元素。有一个名为 VueHtmlToPaper 的 mixin/插件，它完全可以实现我想要的功能，但我无法将其导入到我的 Vue 3 CLI 项目中，因为它是为 VueJS2 创建的，并且全局 API 不同。任何帮助表示赞赏。

main.js

import { createApp } from 'vue'

import App from './App.vue'

 createApp(App).mount('#app')

项目结构：

我正在尝试找到一种自定义<v-select>选项样式的方法。backgroundColor我想根据选项的值提供不同的值。提供的所有内容都:items将被修复（始终相同），因此我需要找到一种方法来通过其特定文本值或声明唯一的类/id 来检测选项。对此最好的方法是什么？谢谢。

当前代码：

<v-select
   :items="[
      'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.
   ]"
>
</v-select>

这是我想要的结果示例的链接。

<v-select
   :items="[
      'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.
   ]"
>
</v-select>

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.grey {
  background-color: grey;
}

我有一个自定义挂钩，其中有一个本地状态：但是，当我使用 toRefs() 导出状态并使用该状态是另一个组件时，我收到错误：“类型‘Ref’不可分配给类型‘布尔值’”

钩子：

interface StateModel {
  isLoading: boolean;
  isError: boolean;
  errorMessage: string;
  data: object | null;
}

export default function useAxios(url: string, data: object) {
  const state: StateModel = reactive({
    isLoading: true,
    isError: false,
    errorMessage: '',
    data: null
  });

  const fetchData = async () => {
    try {
      const response = await axios({
        method: 'GET',
        url: url, // '/test_data/campaign.json'
        data: data
      });
      state.data = response.data;
    } catch (e) {
      state.isError = true;
      state.errorMessage = e.message;
    } finally {
      state.isLoading …