小编Tra*_*axo的帖子

案例1
我们正在尝试将自定义样式应用于渲染的vuetify元素:

<template>
    <v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input {
    background: red;
}
</style>

但没有变化.

<template>
    <div v-html="customHTML"></div>
</template>

<script>
export default {
    data: () => ({
        customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
    })
}
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>

如何将自定义CSS应用于这些元素？

我有一个 v-autocomplete，用户可以在其中进行搜索，如果没有匹配的结果，我想保留 v-autocomplete 组件中的那个。但是 v-autocomplete 的正常行为是在没有匹配结果的情况下删除组件上的内容。

我创建了一个名为 testBlur() 的方法，我在 v-autocomplete 组件的 blur 事件上调用它。

有人能帮我解决这个问题吗？

codepen: https://codepen.io/pen/gBWEVB

谢谢你。

我想在整个页面中更改下面的全局变量

Vue.prototype.$color = 'green';

我尝试使用下面的代码,但它只在我创建的组件中更改

watch: {
   cor(newValue, oldVlue) {
       this.$color = newValue;
   }
}

我是否可以创建一种方法来更改页面所有组件的原型变量？

我需要替换网页中的 LaTex 指令。LaTex 指令包含在两个“$”符号中，类似于 $a^2+b^2=1$（内联公式）或 $$a^2+b^2=1$$（块公式，它将显示在新行中）。现在的问题是我想使用 Javascript 将这些指令替换为一些图片（对应于这些指令），因为浏览器本身显然无法以 LaTex 样式显示这些公式。（见图）a^2+b^2=1如何使用正则表达式来做到这一点？我在下面展示了我的工作，但存在一些问题。对于内联公式，我使用：

var reg = /\$([^$]|(\\$))*\$(?=[^$])/mg

这意味着我想要一些文本以 $ 开头，之后无论是“不是 $”还是“\$”或什么都没有，并以“$”结尾，但在结束之后将不允许 $ 的上升。听起来不错..但是对于像这样的文本：$a^2\$b^2$ 显然，我希望它会显示为（见图）a^2\$b^2，但事实是正则表达式仅替换了一部分它就像“*replaced*b^2$”。我需要帮助~~

我找不到在选择项目后调用的“ afterselection”方法中清除选择字段的方法：

模板：

<v-select
 :items="adrlist"
 @input="afterselection"        
 ></v-select>

选择的数据：

const addressList = [{
"text":"Street 523, 2533",
"value":[1723455.7054408004,5923451.382843224]},
{"text":"Lala 3, 3455",
"value":[1723455.7054408004,5923451.382843224],
}]

验证码：

new Vue({
  el: '#app',
  data () {
    return {
      adrlist: addressList,
    }
  },
  methods:{
    afterselection(item){
      console.log(item);
      //here I want to clear the select
    },
  },
})

这是带有此示例的代码笔：
codepen示例

我试图将v模型设置为null，但这不起作用。

我已经研究和尝试了几天，但我真的找不到解决方法：-/

我想在materialize _variables.scss中更改变量,例如

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/

在我的Vue 2中,main.js我包括这样的物化风格

require('materialize-css/sass/materialize.scss');

因为!默认我想我需要包括我_variables.scss之前包括物化,但我不知道如何.

那么设置我自己的变量的正确方法是什么$primary-color: color("blue", "lighten-2")(例如我想使用materialize _colors.scss中的预定义调色板)？

编辑1:我用vue-cli安装了vue2

编辑2:

文件夹结构:

??? build/
??? config/
??? dist/
??? node_modules/
?    ??? materialize-css
??? src/
?    ??? components
?    ??? router
?    ??? main.js
??? package.json
??? index.html

假设我有一个组件 (myComponent) ：

<template>
   <v-container> <v-container>
</template>

我想多次重复使用它，如何将它们分组，这样它对 UI 没有影响。例如 ：

<template>
   <v-container> <v-container>
</template>

这样做的原因是运行检查v-if="myStore.property"一次，而不是对每个组件运行检查。

我只想在移动设备上添加课程。我在使用vuetify之前已经做到了，但是使用vue似乎更困难：

码：

<div class="{'mobileSnackBar': breakpoint.xs}">
  <p> This is my snackbar </p>
</div>

在vuetify中，您可以$vuetify.breakpoint.xs使用bootstrap获得类似的效果？或者，请推荐其他方法。

我正在设计一个 REST api，如果有人可以在以下场景中帮助最佳实践，我很感兴趣。

我有...

• GET Customers/{customerId}/Orders - 获取所有客户订单
• GET Customers/{customerId}/Orders/{orderId} - 获取特定订单

我需要提供获取客户最近订单的能力。这种情况下的最佳实践是什么？简单地获取所有并按日期排序或提供特定方法？

我不是CSS专家,但直到现在我还没有看到这样的"问题".

所以,我正在使用Vuetify并为搜索表单添加了一个..

现在该组件正在创建:

<div input-group input-group--prepend-icon input-group--text-field primary--text>
  <label for="search"></label>
  <div class="input-group__input"></div>
  <div class="input-group__details"></div>
  <div class="input-group__messages"></div>
</div>

现在我的问题是类.input-group__messages有一个最小高度,我希望它在这种情况下有1px或不显示,但我无法从我的组件中编辑它...有办法去根本风格,但我不想这样做,我想学习或知道什么是我错过的问题.

期待有人的回复

如何一次扩展此VuetifyJS / VueJS数据表示例的所有条目，而不一次扩展一个？

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      item-key="name"
      expand
    >
      <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td> 
        </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>Peek-a-boo!</v-card-text>
        </v-card>
      </template>
    </v-data-table>
  </v-app>
</div>

这是单个扩展的示例：

https://codepen.io/anon/pen/yEWNxE?&editors=101#

我正在使用Vuetify，所以这可能是VueJS，Vuetify甚至是HTML问题，但是我的组件看起来像这样：

<v-list-tile 
  v-for="item in menuItem.items" 
  :key="item.type" 
  :style="`background: ${item.colour}`" 
  :html="item.type">
</v-list-tile>

以:key为例，:单词前面的冒号（）key是什么意思？在哪里可以找到我可以使用的值？

嗨，我正在学习 vuetify，我想更改从 vuetify 默认布局模板导入的导航抽屉的背景。

模板是在官方 vuetify 文档中找到并导入的。

问题是我无法更改抽屉的背景并将其设置为图像

这是带抽屉的默认布局

<template>
  <v-app
    id="inspire"
    dark
  >
    <v-navigation-drawer
      v-model="drawer"
      fixed
      clipped
      app
    >
      <v-list dense>
        <v-list-tile v-for="item in items" :key="item.text" @click="">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              {{ item.text }}
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
        <v-list>
          <v-list-tile v-for="item in items2" :key="item.text" avatar @click="">
            <v-list-tile-avatar>
              <img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
            </v-list-tile-avatar>
            <v-list-tile-title v-text="item.text"></v-list-tile-title>
          </v-list-tile>
        </v-list>
        <v-list-tile class="mt-3" @click="">
          <v-list-tile-action>
            <v-icon color="grey darken-1">add_circle_outline</v-icon>
          </v-list-tile-action>
          <v-list-tile-title class="grey--text text--darken-1">Browse Channels</v-list-tile-title>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon color="grey …