小编Bou*_*him的帖子

使用 Composition API 将数组定义为 Vue 3 组件的 props 很简单......

<script setup>

defineProps({
  items: {
    type: Array,
    required: true,
  },
});

</script>

现在这个数组应该是一个如下所示的对象数组。这也不是问题。

[
  {
    username: "foo",
    email: "foo@example.com"
  },
  {
    username: "bar",
    email: "bar@example.com"
  }
]

但是有没有办法定义数组中的每个对象都必须包含属性username和email？这样使用该组件的 props 的人就知道这些对象必须是什么样子？

当我们将 prop 传递给组件并使用 DefineProps 从子组件定义该 prop 时，会以某种方式创建属性并可从子组件模板访问该属性。

父组件.vue

<template>
    <child-component v-model="product">
</template>

<script setup>
import childComponent from "./childComponent.vue"
</script>

子组件.vue

<template>
    {{ product }}
</template>

<script setup>
const props = defineProps(['product'])
</script>

在 childComponents 模板中，product无需使用props.product或 toRef 即可访问它。我知道脚本设置会自动注入使用过的道具，但我找不到任何信息（在文档中），defineProps 也做了一些事情。有没有这方面的信息。

我需要 VueJS 组件中的路由参数。例如中的42example.de/page/42。

// router
// ...
    {
      path: '/pages/:id',
      name: 'pages',
      component: () => import('../views/PageView.vue'),

    },  
// ...

// PageView.vue
<script setup>
    import { onMounted } from "vue";
    import { ref } from 'vue';

    onMounted(async () => {
      console.log(  $route.params.id );
   }

这里我得到错误： Uncaught (in promise) ReferenceError: $route is not defined。

但在组件的模板中，{{ $route.params.id }}可以进行访问。但我在剧本中需要它。我究竟做错了什么？

我正在学习 Vue 并尝试使用组件标签学习动态渲染。这段代码有什么问题？控制台中没有显示任何错误，但单击按钮仍然不显示所需的组件。它确实可以与 v-if 一起使用，但我接下来的讲座的重点是使用组件动态渲染。哪个不起作用：

<template>
  <div>
    <the-header></the-header>
    <button @click="setSelectedComponent('active-goals')">Active goals</button>
    <button @click="setSelectedComponent('manage-goals')">Manage goals</button>
    <component :is="selectedTab"></component>
  </div>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { ref, defineExpose, defineComponent } from 'vue';
import TheHeader from './components/TheHeader.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

const selectedTab = ref('active-goals');
const setSelectedComponent = (tab) => {
  selectedTab.value = tab;
};

defineExpose({
  selectedTab,
  setSelectedComponent,
});

defineComponent({
  components: {
    TheHeader,
    ActiveGoals,
    ManageGoals,
  },
});
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: …

如果限制超过 300 个字符，我想隐藏文本并显示link，如果单击链接则显示完整内容。

html:

 <tr v-for="(row,index) in datasource">
                            <td v-for="column in gridSchema.grid.columns" class="wrap-break-word" v-show="column.isVisible">  

<span v-if="row[column.headername].length >= 300  && toggle == false" v-html="$options.filters.limitTo(row[column.headername])">
                                    </span><a v-on:click="toggleFlag()" v-show="!row['isEditable'] && row[column.headername].length >= 300  && toggle == false" >Read more</a>
                                    <span v-if="(row[column.headername].length < 300  || toggle == true)" v-html="row[column.headername]">
                                    </span>

<td>
</tr>

js:

  data: {
                ..
                    toggle: false,
datasource:
[
      {
        "id": 0,
        "name": "Christa Hansen",
        "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil …

我正在尝试为 Vue 应用程序创建一个导航栏，我正在使用 Vuetify，在大屏幕上有工具栏，在小屏幕上有打开导航抽屉的汉堡包图标。

它可以工作，但是抽屉前面有一个覆盖层，我无法更改页面。

这是代码：

<template>
  <div>
    <v-app-bar dark>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-toolbar-title>Jobify</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      sidebar: false,
      menuItems: [
        { path: "/jobs", name: "jobs", title: "Jobs" },
        { path: "/companies", name: "companies", title: "Companies" },
        { path: "/jobs/new", name: "new-job", …

尝试 1

主文件

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

商店.js

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

尝试 1 错误

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (store.js?07a4:4)
    at Module../src/store/store.js (app.js:1342)

尝试 2

主文件

import { createApp } from 'vue'
import { store } …

我只想v-if在同一个div中使用2个不同的,如下所示:

其实我有这个代码:

<div class="o-overlay" v-if="show">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

我希望有类似的东西:

<div class="o-overlay" v-if="show" v-if="visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>