小编And*_*eth的帖子

我有一个google-maps_pin.svg代表 google-maps pin的文件。

我想根据类别（餐厅、美术馆等）动态地为不同的标记（使用 v-for 生成）着色。

有没有办法用 vue2 传单来实现？

这是我的地图：

<l-map 
  style="z-index: 0" 
  ref="mapRef" 
  :zoom="zoom" 
  :center="center" 
  @update:zoom="zoomUpdated" 
  @update:center="centerUpdated"
  @update:bounds="boundsUpdated">
  <l-tile-layer :url="url"></l-tile-layer>
  <l-marker 
      v-for="(markedLocation, index) in marker" 
      :key="'marker-' + index" 
      :lat-lng="markedLocation.location" 
      :icon-url="require('@/assets/googlemaps_markers/google-maps_pin.svg')">
  </l-marker>
</l-map>

我想赋予单个引脚的颜色存储在markedLocation.info.category.color变量中。

我需要一个v-text-field用户可以输入他们通过短信收到的确认码的地方。即使用户没有写大写字母的意图，该字段的内容也应该全部自动转换为大写字母。

如何在Vuetify中检查并处理a的点击事件v-menu？

我想显示一个警报框，通知用户一些事情。我希望它在 5 秒后消失，即使用户没有确认。

我已经尝试过timeout属性，:timeout但这些似乎都不起作用，根据 Vuetify 文档，它们甚至不存在于标签中，所以我一无所知。

模板：

<div>
      <v-alert
        :value="alert"
        v-model="alert"
        dismissible
        color="blue"
        border="left"
        elevation="2"
        colored-border
        icon="mdi-information"
      >Registration successful!</v-alert>
    </div>

    <div class="text-center">
      <v-dialog v-model="dialog" width="500">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">Click Me</v-btn>
        </template>

        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>Privacy Policy</v-card-title>

          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex …

我想将所有七个按钮居中对齐。正如你所看到的，与第一个相比，最后一个有点偏离。

我如何实现这一目标？我已经试过justify="center"和justify="space-around"

这是我的代码：

  <v-row no-gutters justify="space-around">
    <v-col v-for="(item, index) in buttons" :key="index">
      <toggle-button
        :weekday="item.weekday"
        :button="item.state"
      ></toggle-button>
    </v-col>
  </v-row>

这是toggle-button组件：

<template>
  <v-btn
    outlined
    depressed
    :class="button ? 'primary white--text' : 'outlined'"
    @click="button ? (button = false) : (button = true)"
    v-model="button"
    icon
  >
    {{ $t("roomservice.weekdays." + weekday) }}
  </v-btn>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["button", "weekday"]
};
</script>

我试图v-alert根据payment-successful查询参数是true还是有条件地显示false.

这是我尝试过的：

<v-alert v-if="$route.query.payment-successful == true" type="success" dismissible>
  I'm an alert
</v-alert>

但它似乎不起作用，因为当我设置查询参数时没有显示警报。我也尝试将$route.query.payment-successful引号放在引号之间，但它也不起作用。