小编Bou*_*him的帖子

我一直在关注他们网站上的官方 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 …

我大致按照这篇文章制作了一个可拖动的组件：

<template>
  <div ref="draggableContainer" class="draggable-container">
    <div class="draggable-header" @mousedown="dragMouseDown">
      <slot name="dragger"></slot>
    </div>
    <slot></slot>
  </div>
</template>

然后在我的Calculator.vue组件中我有：

<template>
  <Draggable class="calculator">
    <input type="text" class="calculator-screen" slot="dragger" value="" />

    <div class="calculator-keys">
      <button type="button" class="operator" value="+">+</button>
      <button type="button" class="operator" value="-">-</button>
      <button type="button" class="operator" value="*">&times;</button>
      <button type="button" class="operator" value="/">&divide;</button>

      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>

      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>

      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>

      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button> …

请参阅这个最小示例

测试.vue

<template>
  <div>
    <slot name="this_is_not_scoped_slots"/>
  </div>
</template>

<script >
import Vue from "vue";

export default Vue.extend({
  mounted() {
    console.log(Object.keys(this.$scopedSlots));
  }
});
</script>

应用程序.vue

<template>
  <Test>
    <template #this_is_not_scoped_slots>But it shows in this.$scopedSlots</template>
  </Test>
</template>

<script>
import Test from "./Test.vue";

export default {
  components: {
    Test
  }
};
</script>

在上面的示例中，该控制台将注销["this_is_not_scoped_slots"]。

为什么会发生这种情况？

Vue实例中有两个属性

1. this.$slots
2. this.$scopedSlots

这两者的行为确实不同：

1. 如果您使用v-slot:my_scope_name="{ someValue }"，则my_scope_name不会出现在this.$slots
2. 但是，无论您定义什么，您的命名插槽将始终显示在this.$scopedSlots

为什么会发生这种情况？

我正在构建一个库，如果用户是否提供了命名插槽，我想要条件渲染，我是否应该始终使用它this.$scopedSlots来检测这些东西？

简化示例：

<v-list>
  <v-list-item :to="bla/bla">
    <v-menu>
      <template v-slot:activator="{on}">
        <v-btn v-on.prevent="on"/> // I tried .stop, .stop.prevent, self.prevent, prevent.stop
      </template>
      <div> bla </div>
    <v-menu>   
  </v-list-item>
</v-list>

正如您所看到的，子事件 v-on 触发 v-menu 并显示此 div。但它也会触发parent :to 事件。有什么想法吗？

只是一个简单的问题，

我知道 Vue3 不再使用过滤器，并且注释说使用计算或方法代替。但还有一个我们可以使用的 globalProperties，我使用了这个 globalProperties 但不断收到此错误

未捕获的类型错误：无法读取未定义的属性“globalProperties”

有谁知道我的代码中的错误在哪里？

const app = {
data() {
    return {
        message: ""
    }
  }
}

app.config.globalProperties.$filters = {
formatDate(value) {

    if (value == "0001-01-01T00:00:00")
        return "";
    var today = new Date(value);
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = dd + '/' + mm + '/' + yyyy;
    return today;
   }
}

Vue.createApp(app).mount('#app');

我在表中使用过滤器，如下所示

    <td>
         {{ $filters.formatDate(incident.incidentData) }}
    </td>

我有一个自定义挂钩，其中有一个本地状态：但是，当我使用 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 …

我如何b-table根据更改数据模型的某些事件在下面的 BootstrapVue示例中显示/隐藏列。

<template>
  <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
  <b-table striped hover :items="items"></b-table>
</template>

<script>
const items = [
  { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
  { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
  { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
  { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]

export default {
  data () {
    return {
      items: items,
      showHideAge: true
    }
  }
}
</script>

我的vuex商店看起来像这样，但打电话时addCustomer我得到ReferenceError: state is not defined：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: { customers: [] },
  mutations: {
    addCustomer: function (customer) {
      state.customers.push(customer); // error is thrown here
    }
  }
});

这是addCustomer绑定/模板：

<template>
    <button class="button" @click="addCustomer">Add Customer</button>
</template>

这是 的定义addCustomer：

<script>
  export default {
    name: "bootstrap",
    methods: {
      addCustomer: function() {
        const customer = {
          name: 'Some Name',
        };

        this.$store.commit('addCustomer', customer);
      }
    } …

我只见过每个组件有一个 onMounted() 的示例。
我想对每个功能使用 onMounted() 。
有什么问题吗？

我的组件.vue

<script setup>
import { onMounted } from 'vue';

// Feature A
onMounted(() => {
  // Do something.
});

// Feature B
onMounted(() => {
  // Do something.
});
</script>