小编Bou*_*him的帖子

我做了很多阅读，但没有一个链接告诉我如何在 vuejs 中添加字体。这就是我在我的 less 文件中导入字体的方式。

@font-face {
  font-family: "Questrial";
  src: url("../../fonts/Questrial-Regular.ttf");
}

@font-face {
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");
}

@font-face {
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}

这是我得到的错误

./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 中的错误 1:4 模块解析失败：意外字符 '' (1:4) 您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码）

我是 VUEJS 的新手，之前对 react 或 angular 一无所知。我只知道 jquery 和 javascript。所以请有人给我一个包含字体的分步指南。提前致谢 ：）

我已经v-text-field但无法在v-text-fielddom 位置之外显示错误消息。在 vuetify 文档中没有提到这个问题。

是否可以将错误消息放在输入附近？

实际的：

预期的：

<template>
  <v-app>
    <v-content>
      <playground></playground>
      <v-text-field
        style="width:120px;"
        class="numer"
        :rules="[rules.required, rules.min, rules.max]"
        v-model="numValue"
        type="number"
        append-outer-icon="add"
        @click:append-outer="increment"
        prepend-icon="remove"
        @click:prepend="decrement"
      ></v-text-field>
      {{numValue}}
    </v-content>
  </v-app>
</template>

<script>
import Playground from "./components/Playground";

export default {
  name: "App",
  components: {
    Playground
  },
  data: function() {
    return {
      numValue: 0,
      form: {
        min: 2,
        max: 10
      },
      rules: {
        required: value => !!value || "Required.",
        min: v => v >= this.form.min || `The Min is ${this.form.min}`,
        max: …

我需要获取图像/元素的高度，这就是我所做的：

mounted() {
   this.infoHeight = this.$refs.info.clientHeight + 'px';
}

当我在热重载时保存它时，它会工作，它会获得正确的高度，但是当我刷新页面时，它会返回较小/错误的值。我也试了一下created()，也是一样的。在其他情况下，它甚至不返回任何内容。

更新（临时解决方案？）

mounted() {
       setTimeout(() => this.infoHeight = this.$refs.info.clientHeight + 'px', 100);
}

我也尝试过使用window.addEventListener('load', () => //todo)，但在某些组件上它有效，而在其他组件上则无效。

有没有在方法上使用 lodash debounce 的解决方案？我还需要函数中的“this”。例子：

data() {
    info: 'Read Me!'
},
methods: {
  readData() {
      console.log(this.info)
  }
}

在 Vue2 中我可以使用：

methods: {
  readData: debounce(function() {
      console.log(this.info)
  }, 500)
}

我正在做一个 vue 项目，vue 版本是 3.0 最近由于某种原因我可以看到这么多警告。

模板编译错误：v-model 值必须是有效的 JavaScript 成员表达式

我想这是因为我使用了这样的长 v-model 变量名称。

<textarea v-model="firstVariable.subVariable.subVariableKey" readonly></textarea>

如果有任何想法请告诉我。

提前致谢

这是组件和模板代码。

var myTemplate = Vue.defineComponent({
    template: '#myTemplate',
    
    data() {
        return {
          firstVariable: {}
        }
    },
    
    mounted() {
        loadData();
    },
    
    methods:{
      loadData() {
          axios.get(MY_ROUTES).then(res => {
              // let's suppose res.data is going to be {subVariable: {subVariableKey: "val"}} 
              this.firstVariable = res.data;        
              
          })
      }
    }
    
});

// template.html

<script type="text/template" id="myTemplate">
    <div class="container">
      <textarea v-model="firstVariable.subVariable?.subVariableKey"></textarea>
    </div>
</script>

在 main.js 中，我设置axios为全局函数。

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = createApp(App);
app.config.globalProperties.$http = axios;
app.mount('#app');

问题是如何使用组合 api 在组件中调用此函数？

<script>
export default {
  setup() {
   //how do I call the `axios` global function?
 };
</script>

我正在使用v-formVue 中的 Vuetify 使用他们的 Composition API 和<script setup>. 使用v-form的规则，我创建了一种验证用户输入的方法；但是，提交表单后，我需要清除表单的字段。当重置字段（使用空字符串）时，会触发表单规则并出现验证错误。我想访问 的v-form内置函数（例如clear()）；但是，我无法this.$refs.form访问<script setup>. 如何访问这些功能或仅清除表单而不在提交后触发验证规则错误？

这是到目前为止的脚本部分：

<script setup lang="ts">
import { ref, Ref } from 'vue'
import { Service } from '@/types/service'

const service: Ref<Service> = ref({ name: '', endpoint: '' })
const loading = ref(false)
const isValid = ref(true)

const register = () => {
  loading.value = true
  isValid.value = false
  clear()
  setTimeout(() => {
    loading.value = false …

我正在尝试在以下Vuetify日历上启用输入的事件：

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue。

我已设置日历以接受以表单提交的输入数据，包括名称，详细信息，开始，结束，颜色。当我提交表格时，出现错误提示

所有事件都必须将start和end属性设为有效时间戳，格式为YYYY-MM-DD。

我在开始和结束输入字段中使用type =“ date”，它在MM-DD-YYYY中呈现日期。我尝试改用Vuetify日期选择器，以使字段以YYYY-MM-DD格式呈现，但无济于事。如何重新配置​​此日历以改为接受MM-DD-YYYY格式的日期？

日历已修改：

增加了功能

      async addEvent () {
        this.start = await new Date(this.start).toISOString().substring(0,10)
        this.end =  await new Date(this.end).toISOString().substring(0,10)
        this.events.push({name: this.name})
        this.events.push({details: this.details})
        this.events.push({start: this.start})
        this.events.push({end: this.end})
        this.events.push({color: this.color})
      },

完整代码

<template>
  <v-row class="fill-height">
    <v-col>
      <v-sheet height="64">
        <v-toolbar flat color="white">
          <v-btn outlined class="mr-4" @click="setToday">
            Today
          </v-btn>
          <v-btn fab text small @click="prev">
            <v-icon small>mdi-chevron-left</v-icon>
          </v-btn>
          <v-btn fab text small @click="next">
            <v-icon small>mdi-chevron-right</v-icon>
          </v-btn>
          <v-btn
            color="primary"
            dark
            @click.stop="dialog = true"
          >
            New Event
          </v-btn>
          <v-toolbar-title>{{ title }}</v-toolbar-title> …

所以我有一组按钮，我希望它们位于页面的右侧，但是justify-end/justify='end'不起作用v-row。

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-container>
        <v-form>
          <v-row justify='end'>
            <v-col>
              <v-btn>Button 1</v-btn>
              <v-btn>Button 1</v-btn>
              <v-btn>Button 1</v-btn>
            </v-col>
          </v-row>
        </v-form>
      </v-container>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>

我看过这个问题，但是使用 text align 似乎很麻烦，我想知道是否有更好的解决方案？

Vue 3 有一个新的 Teleport 功能，它取代了 vue 2 中的 portal-vue 插件。但是，我发现不可能将组件移植到 vue 控制的地方（=在 vue 应用程序中）。它仅在移植到外部（主体、其他元素......）时有效。

const app = {
  template: `
  <div>
    <h1>App</h1>
    <div id="dest"></div>
    <comp />
  </div>`
}


Vue.createApp(app).component('comp', {
  template: `
  <div>
    A component
    <Teleport to="#dest">
      Hello From Portal
    </Teleport>
  </div>`
}).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></script>

<div id="app"></div>

如您所见，控制台甚至报告说需要已经渲染传送目标。但是我怎么能告诉 vue 先渲染哪个组件呢？在我的例子中，目标在传送前的 dom 中。

这在 portal-vue 中不是问题，而且非常令人失望，因为它使整个概念变得不那么可用。