小编Bou*_*him的帖子

我正在使用 Ant Design Vue 的 Carousel 在 Instagram Story Clone 项目中显示一些后端生成的数据。

问题是当轮播中只有一个内容时，箭头和圆点就会消失。

轮播文档：https : //antdv.com/components/carousel

代码沙盒：https : //codesandbox.io/s/brave-blackwell-e6d5c? file =/ src/ App.vue

箭头显示：

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>

    <!-- Right Arrow -->
    <div
      slot="nextArrow" 
      slot-scope="props"
      class="custom-slick-arrow" 
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>

    <div><h3> Content 1 </h3></div>
    <div><h3> Content 2 </h3></div>
  </a-carousel>

箭头不显示：

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: …

在使用 Vue CLI 4.5.x 时，我尝试了以下代码：

import Vue from "vue"
import App from './App.vue'

new Vue({
    el: "#app",
    render: h=> h(App)
})

但不幸的是，它给出了以下警告：

"export 'default' (imported as 'Vue') was not found in 'vue'

我可以从中得出的结论是，Vue CLI 4.5.x 已经停止了这种首先创建 Vue 实例的应用程序创建方式。

初始化主应用程序，官方的方式如下：

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

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

我不确定我的结论是否正确。如果有人能具体说明我的结论，那将是一个很大的帮助，因为到目前为止我还没有在 vue 的官方文档中找到任何证据。

此外，后面的代码是使用 Vue CLI 4.5.* 应用程序实例烘焙的，而前面的代码在使用 CDN 时是正确的。

我使用了新的 Vue 3 Composition API 并为响应式数据编写了一个“存储”。

const state = reactive<State>({
  accessToken: undefined,
  user: undefined,
});

export default {
  state: readonly(state),
}

在创建应用程序时，我向所有组件提供商店：

const app = createApp(App)
  .provide("store", store)
  .use(IonicVue)
  .use(router);

最后在一个组件/视图中，我注入了 store 来使用它。

export default defineComponent({
  name: "Home",
  inject: ["store"],
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
  },
  computed: {
    email() {
      return this.store.state.user.email;
    },
  },
});
</script>

不幸的是，Typescript 不喜欢我this.store在计算属性中使用的方式email()

并说

类型“ComponentPublicInstance<{}、{}、{}、{ email(): any;”上不存在属性“store”；}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, …

• Quasar 框架 v2 测试版
• Vue 3 组合 API
• 打字稿

组件模板

<q-btn 
  @click.stop="showingActionMenu()" 
  color="grey-7" 
  round 
  flat 
  icon="more_vert"
>
  <q-menu
    ref="showAction"
    auto-close
  >
    ...                       
  </q-menu>
</q-btn>

setup() {
  ...
  const showAction = ref<Function | null>(null)
  ...
})

组件设置

return {
  ...
  showAction,
  showingActionMenu() {
    showAction?.value?.show()
  },
  ...
}

返回的方法显示错误

Property 'show' does not exist on type 'Function'.

我想构建我的应用程序并导出没有随机数的文件，例如app.e48201ef.jsapp.js。

我的应用程序位于 Wordpress 根目录的 /app/ 文件夹中，我将 js 文件一个一个地包含在模板中，以对 .

问题是我真的对 webpack、vue.config.js 感到困惑，事实上 Webpack 现在包含在 VueCLi3 中，我将文件包含在 index.html 中，我不使用它。

如何为每个文件设置静态名称以保持我的应用程序在生产中更新？

谢谢你。

我想将 html 存储在变量内。例子：

data: function() {\n  return {\n    my_html: \'<input type="text" v-model="data"\'\n  }\n}\n

我想在数据中接收用户在字段中输入的值。但此连接不起作用\n完整示例：

var test = new Vue({\n  el: \'#some_id\',\n  data: function() {\n    return {\n      data: \'\',\n      my_html: \'<input type="text" v-model="data" />\'\n    }\n  },\n  template: \n    \'<div>\n      <input type="text" v-model="data" />\n      <input type="text" v-model="data" />\n      <span v-html="my_html"></span>\n    </div>\'\n});\n

在此示例中，前两个输入通常会与数据链接并相互链接，但第三个输入（跨度内的输入）将\xe2\x80\x99t

我正在尝试呈现组件列表。除了 img src url 之外，所有数据属性都正确显示。

文件/文件夹是：

CryptContent.vue - 包含 v-for

• 渲染资产的组件/ - 包含图像

CryptContent.vue 包含：

<template>
<OwnedCardContent
            v-for="card in allCards"
            :id="card.id"
            :name="card.name"
            :cost="card.cost"
            :cset="card.cset"
            :edition_total="card.edition_total"
            :level="card.card_level"
            :unlock_czxp="card.unlock_czxp"
            :buy_czxp="card.buy_czxp"
            :transfer_czxp="card.transfer_czxp"
            :sacrifice_czxp="card.sacrifice_czxp"
            :url="card.graphic"
            :card_class="card.bg"
></OwnedCardContent>
</template>

<script>
allcards : [
      {id:0, name: 'Jim Zombie',graphic: './assets/jim.svg', cost: 300, cset: 'We like to party set', edition_total: ' of 100',unlock_czxp : '1,300,300',card_level: 80, buy_czxp: '1,800',transfer_czxp: '100', sacrifice_czxp: '2,300',bg: 'card-bg card-bg-6'},
]
 </script>`

OwnedCardContent.vue 包含：

<template>
<div id="1" :class="card_class">
            <img class="card-img" :src="url" />
            <span class="card-edition">#1{{edition_total}}</span>
            <div …

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

只是一个简单的问题，

我知道 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>