小编Sam*_*Sam的帖子

我是v-form这样创造的

<v-form ref="form" v-model="valid" lazy-validation>
  ...
  <v-btn
     :disabled="!valid"
     @click="submit"
   >
     submit
   </v-btn>
</v-form>

脚本:

if (this.$refs.form.validate()) // Error is in here

如果我只有console.log(this.$ref.form)validate()函数可用.但为什么这个错误在建设时会出现？

如何突出显示 v-data-table 中的选定行？我试图通过selected在示例中添加标志变量来修改数据

在上面的示例中，单击一行将通过添加名为 primary 的类来突出显示。如果它是静态数据，它工作正常，但如果它是动态数据，如从 API 获取数据，则数据表中的数据将始终刷新，如果我更改分页和排序等等。

例如，在我的情况下，如果我对列进行排序，则数据将来自 API，并且 v-data-table 中的数据将使用排序后的数据进行刷新，在这种情况下，selected每次都很难维护该标志当数据发生变化时。有没有其他方法可以突出显示选定的行？

我有很多组件，我想按需导入。我有一个下拉菜单，其中实际上包含要加载的组件列表。我试过这个例子

<component :is="componentLoader"></component>

在脚本中

componentLoader () {
  return () => import('@/components/testDynamic') 
}

testDynamic是一个组件名称（目前我正在尝试使用静态组件）。

得到这个错误

GET http://localhost:8080/0.js net::ERR_ABORTED 404
[Vue warn]: Failed to resolve async component: function () {
    return __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, "./src/components/testDynamic.vue"));
  }
  Reason: Error: Loading chunk 0 failed.

如何解决这个问题？我做错什么了吗？还是有其他方法可以动态导入组件？

我有这样的文件夹结构

--Page    
   -group.vue    
--Services
  -groupMixin.ts

group.vue的脚本

<script lang="ts">
     import { Vue, Component, Mixins } from 'vue-property-decorator'

     import { GroupMixin } from '../../services/groupMixin';
     @Component
     export default class Group extends Mixins(GroupMixin) {
        created () {
          console.log(this.test)
        }
      }
</script>

groupMixin.ts的代码

import { Vue } from 'vue-property-decorator'
//creating mixins.
export class GroupMixin extends Vue {
  test: string = 'sss'
}

我在这里面临两个问题。

首先，要导入我使用../../的ts文件，有什么方法可以使用./或@ /。无需使用lang =“ ts”，我可以导入这样的js文件@ / services / ...

其次，无法访问我在groupmixin.ts中声明的可变测试。

我有一个main.ts文件，我想在那里声明一个变量并在所有Vue文件中使用它。

我有一个包含以下内容的sfc.d.ts：

declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
}

declare var foo: any;

我foo = "1234"在main.ts 中分配了一个值。如何foo在所有 Vue 文件中使用这个变量？或者有没有其他方法可以创建全局变量并使用它？

我创建了支持 vue 的自定义节点模块。

包.json

{
 "name": "test-node-module",
 "version": "1.0.0",
 "description": "",
 "main": "./dist/index",
 "scripts": {
   "dev": "vue serve test.vue",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Sam",
 "license": "ISC",
 "devDependencies": {
   "@vue/compiler-sfc": "^3.0.0-beta.15",
   "bili": "^5.0.5",
   "rollup-plugin-vue": "^6.0.0-beta.6",
   "vue-template-compiler": "^2.6.11"
 }
}

索引.js

import test from "./test.vue"

 export default {
   install(Vue, options) {
     Vue.component("test", test);
   }
 }

test.vue有简单的文本。

在我的项目中的main.js中

import Test from "test-node-module"

Vue.use(Test)

使用该组件会<test></test>显示这样的错误。

[Vue warn]: Error in render: "TypeError: vue.openBlock …

我有一个具有调整大小事件的图像幻灯片组件

imageSliderComponent.vue

methods: {
 resize: function () {
   console.log(this.$el)
   // Handle window resize
   // Code
 }
}
mounted () {
 window.onresize = this.resize
}

在父组件中，我在多个地方使用这个图像滑块，像这样

应用程序.vue

<image-slider :data="data1" />   // Slider 1
<image-slider :data="data2" />   // Slider 2

因此，当我尝试调整窗口大小时，window.resize 事件仅适用于最后出现的组件（即滑块 2）。对于第一个组件（滑块 1），调整大小方法不起作用。

有没有办法独立处理可重用组件的调整大小？请建议是否有任何其他不同的实现。

尝试导航到密码页面，vue-router 抛出此错误

Uncaught (in promise) Error: Navigation cancelled from "/" to "/password" with a new navigation.

导航到密码页面已成功重定向，但不确定为什么会抛出此错误。我之前没有观察到这个错误。

vue路由器版本： vue-router@3.3.4

点击一个按钮做 this.$router.push({name: 'password', query: {username: this.username}})

在路由器/index.js

{
path: '/',
component: loginComponent,
children: [
  {
    path: '/',
    alias: '/login',
    name: 'login',
    component: () => import('../views/email.vue')
  },
  {
    path: 'password',
    name: 'password',
    component: () => import('../views/password.vue')
  }
]

}

以下是v-autocomplete的示例 Here

如何将每个项目的对象分配给自动完成的模型？

如何禁用 v-autocomplete 中的选项？我确实看到了这一点item-disabled并传递了它不起作用的选项的字符串值。代码片段

<v-autocomplete
    :items="states"
    item-text="name"
    label="State"
    item-disabled="Florida"
  ></v-autocomplete>

我使用 css 安装图标npm install material-design-icons-iconfont，它在节点模块中可用。在我构建之后，下面的 woff 文件在 dist 中可用

Material-design-icons.css

  /* For IE6-8 */
      src: local("Material Icons"), local("MaterialIcons-Regular"), 
      url("./fonts/MaterialIcons-Regular.woff2") format("woff2"), 
      url("./fonts/MaterialIcons-Regular.woff") format("woff"), 
      url("./fonts/MaterialIcons-Regular.ttf") format("truetype");

所有三个 woff 文件都显示 404。我在 dist 文件夹中进行了验证，我可以在 static/fonts/ .woff 中看到所有这些文件。在浏览器控制台中还有`localhost:8000/static/fonts/ .woff。所有文件名和路径都正确，但在控制台中仍然看到 404 错误。

我正在新窗口中打开扩展程序。 背景.js

chrome.browserAction.onClicked.addListener(function(msg, sender, response){
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {tabId: tabs[0].id}, function(response) {});
    // creating new window.
    chrome.windows.create({ url: 'popup.html', width: 320, height: 480})
 })
})

在打开新窗口之前，标签 ID 将是活动标签 ID，表示我打开 chrome 扩展程序的位置（例如：google.com）。我正在尝试在popup.js 中访问该选项卡 ID 。因为我想访问打开 chrome 扩展程序的页面（google.com）的 DOM。我怎样才能做到这一点？或者有没有其他方法可以在popup.js 中获取标签 ID ？

在popup.js 中尝试其他方式

chrome.windows.getAll({populate:true}, function(tabs){
  console.log(tabs)
});