标签: vuejs3

我有一个组件列表，我想从外部为它们设置一个配置，

例如：

 const myConfig = [
  {
    name: 'example',
    renderer: () => (<button @click="clickHanlder">Click me!</button>)
  },
  ...
 ];

对于我的组件，我想使用myConfig如下所示：

  <template>
    <div class="example">
      <template v-for="(item, index) in myConfig" :key="index">
        My Button:
        <div class="example-2">{{ item.renderer() }}</div>
      </template>
    </div>
  </template>

请注意，我不想使用slots

我怎样才能做到呢？

为什么 vue3js 中过渡动画不起作用？我看不到任何动画。我正在使用这个库https://github.com/ivanvermeyen/vue-collapse-transition

<template>
  <nav class="navbar color-dark section-padding">
    <span :class="this.$route.meta.connect ? 'navbar-toggler' : ''">
      <button class="border-0 navbar" @click="open()">
        <img :src="navgridImg" style="height: 26px; margin: 1vw" />
      </button>
    </span>

    <CollapseTransition >
      <div v-show="show" :class="showClass" id="navbarSupportedContent">
        jdlkajdlsajdlsjdlskajdlsakjdlsajjdlkajd
        lsajdlsjdlskajdlsakjdlsajjdlkajdlsajdlsjdlska
        jdlsakjdlsajjdlkajdlsajdlsjdlskajdlsakj
        dlsajjdlkajdlsajdlsjdlskajdlsakjdlsaj
      </div>
    </CollapseTransition>
  </nav>
</template>
<script>
  import { ref } from 'vue'
  
  import { CollapseTransition } from "vue-collapse-transition"

  export default {
    components: { CollapseTransition,  },
    setup() {
      const show = ref(false)
      const showClass = ref('collapse navbar-collapse')

      const open = () => {
        show.value …

我在全局空间中有一个反应对象：

let cart = Vue.reactive({
    order: {
       itemsCount: 0
    },
    items: []
});

效果很好。当我们以任何方式更改此购物车时（例如cart.order.itemsCount += 1;）更改此购物车时，其他 UI 部分都会自动更新。

但是如果我们将它设置为一个新对象（假设我们order从服务器收到了一个新对象），那么它就会崩溃并且不再工作：

cart = serverCart

我们甚至尝试过cart = Vue.reactive(serverCart)，它仍然不会导致其他 UI 部分重新渲染。

我们可以手动设置每个属性：

cart.order.itemsCount = serverCart.order.ItemsCount;
cart.items[0].productTitle = serverCart.order[0].productTitle;
...

但这当然是愚蠢的。

我们如何在 Vue.js 3 中完全重新设置响应式对象？

更新：

您可以看到此代码和框的运行情况。

我在使用 vitest 进行测试时无法使用 Vue3 运行模拟操作。

我有一个组件，它调用一个模块化的 vuex 存储，该存储使用组合 api 导入到我的组件中。像下面这样的东西。

export default defineComponent({
  setup() {
    const { doAction } = useModActions([
      'doAction'
    ])
  }
})

我用来createNamespacedHelpers从 vuex-composition-helpers 库设置我的商店模块。

在我使用useStore密钥Symbol设置商店状态后。我通过执行以下操作在我的应用程序中使用它

app.use(store, key)

为了在我的测试中模拟它，我正在尝试以下操作

   const actions = {
      doAction: vi.fn()
    }
    const spy = vi.spyOn(actions, 'doAction')
    const mockStore = createStore({
      modules: {
        mod: {
          namespaced: true,
          actions
        }
      }
    })
    const wrapper = mount(Component, {
      global: {
        provide: { [key]: mockStore }
      }
    })

但我的间谍从未被调用，我的组件总是调用原始实现。有没有办法让所有这些部分一起工作？

我使用 Docker 和 Kubernetes 部署了一个 Vue 页面，它正在运行。然而，即使我禁用了 HMR，Vite 仍然会在出错后刷新：

与“wss://dashboard.default.io:8181/”的 WebSocket 连接失败：

[vite] 服务器连接丢失。轮询重新启动...

Dockerfile：

FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" ]

yarn dev调用vite命令

vite.config.js：

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: false
  }
})

vue.config.js：

module.exports = {
    devServer: {
      proxy: 'https://backend.default.io'
    }
  }

包.json：

FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" …

我正在尝试在我的 Vue 3 应用程序中实现使用 Google 登录功能，我找到了一些 npm 包来实现此功能，但这些包很快就会被弃用（此警告显示在控制台中）。

我喜欢使用Google Identity Services将使用 Google 登录功能添加到我的网络应用程序中，该应用程序提供一键注册和自动登录等功能，我如何在 Vue 3 中轻松实现此功能？

<script lang="ts" setup>   
  interface Props {
    bigArray: string[];
  }
        
  ***const props = withDefaults(defineProps<Props>(), {
    bigArray:[],
  }*** <---- Here is the error, setting props
        
  const bigArray = ref(props.BigArray);
</script>

ITsInterface.ts

BigArray?: string[] | null;

在这种情况下寻找将空数组设置为 prop 的正确方法：

• Vue.js3
• 组合API
• 打字稿
• 在脚本标签中设置

下面是标题和正文（不同组件）的代码。当你在组件1内部时，如何使用组合API方式调用组件2的继续函数并传递参数......

第 2 部分：

export default {
    setup() {
        const continue = (parameter1) => {
            // do stuff here
        }
        
        return {
            continue
        }
    }
}

这就是我尝试编辑数组值时遇到的错误

我想更改特定索引上的数组值，但是当我尝试这样做时，我的错误显示在控制台中，任何人都可以帮助我解决这个问题。

<script>
//import Vue from 'vue'
import Task from "./Task.vue";
import TaskName from "./TaskName.vue";
export default {
  components: {
    Task,
    TaskName,
  },
  data() {
    return {
      Task: [],
    };
  },
  methods: {
    sectionTask(Task) {
      const newTaskTitle = {
        Task: Task,
      };
      this.Task.push(newTaskTitle);
    },
    onremoveTask(Index){
        this.Task.splice(Index, 1)
    },
    onUpdateTaskTitle(Index,newTaskTitle){
      console.log(Index);
      console.log(newTaskTitle);
      this.$set(this.Task, Index, newTaskTitle);
    },
  },
};
</script>

<template>
  <TaskName @section-task="sectionTask" />
  <Task :Task="Task" @remove="onremoveTask" @update="onUpdateTaskTitle"/>
</template>

我正在将PrimeVue Splitter与 Vue3 和组合 API 结合使用。我想让每个面板的大小动态化，所以当我单击按钮时，它们会返回到原始大小。

这就是我到目前为止所拥有的

<button @click="fixPanels()" >fix</button>

<Splitter style="height: 100%" class="mb-3">
    <SplitterPanel :size=smallPanelSize >
        Panel 1  
    </SplitterPanel>
    <SplitterPanel :size=bigPanelSize >
        Panel 2 
    </SplitterPanel>
</Splitter>


export default {  
  setup(){

    let smallPanelSize = ref(30)
    let bigPanelSize = ref(70)  
    
    const fixPanels = ()=>{   
      message.value = 30;
      bigPanelSize.value = 70
    } 

    return{smallPanelSize, bigPanelSize, fixPanels}
    
  } 
} 

我可以自由调整面板的大小，但是当fixPanels单击 时，它们不会返回到原始大小。我想我必须以某种方式使用双向绑定，或者v-model但我不知道如何使用，这里没有输入。如果这是不可能的，您能否建议一个类似的可调整大小的面板组件，面板尺寸是动态控制的？

谢谢