小编Mat*_*ell的帖子

我有一个<v-select>下拉列表,我想用作导航到其他页面的URL列表.我遇到的问题是onchange我正在使用的事件返回先前选择的值而不是当前选定的值.

我已经调整了代码以打印到控制台而不是测试.该:hint功能正常工作,所以我敢肯定这件事情做的onchange功能.

Codepen

这是代码:

<template>
  <v-app>
  <v-container fluid>
    <v-layout row wrap>
      <v-flex xs6>
        <v-select
          :items="items"
          v-model="select"
          label="Select"
          single-line
          item-text="report"
          item-value="src"
          return-object
          persistent-hint
          v-on:change="changeRoute(`${select.src}`)"
          :hint="`${select.src}`"
        ></v-select>
      </v-flex>
    </v-layout>
  </v-container>
</v-app>
</template>

<script>
/* eslint-disable */
    new Vue({
  el: '#app',
  data () {
      return {
        select: { report: 'Rep1', src: '/rep1' },
        items: [
          { report: 'Rep1', src: '/rep1' },
          { report: 'Rep2', src: '/rep2' }
        ]
      }
    },
    methods: {
      changeRoute(a) {
        //this.$router.push({path: …

JSFiddle

我将如何编辑 HTML/CSS 以在每个复选框/值对之间创建间距？现在每个复选框和每个值均匀分布。我希望 value1 接近 checkbox1，但 checkbox2 与 value1 有一些距离。

代码在这里：

.checkboxes {
  text-align:center;
}

.checkboxes input{
  margin: 0 20px 0;
}

<div class="checkboxes">
  <span>
    <input type="checkbox" name="One" value="One"> One
    <input type="checkbox" name="Two" value="Two"> Two
    <input type="checkbox" name="Three" value="Three"> Three
    <input type="checkbox" name="Four" value="Four"> Four
  </span>
</div>

无法诊断左上角浮动像素的原因div.它只在我添加一个时出现border-radius.

仔细观察每个角落,您可以看到在应用半径之前应用线条时的一些碎片.也许需要一种不同的技术.

CODEPEN

.contest-types { 
	border: 2px solid #BCCED4;
	border-radius: 10px;
	color: #1B2437;
	padding: 10px; 
	margin: 20px; 
	width: 500px; 
  height: 200px;
	background-color: #F9FDFF;
	position: relative;
}

.contest-types:before {
	content: '';
	width: 2px;
	height: 2px;
	background-color: #5697fc;
	position: absolute;
	left: -2px;
	top: -2px;
	display: none;
}

.contest-types:after {
	content: '';
	position: absolute;
	display: block;
	background-color: #5697fc;
}

.contest-types:hover {
	border: 2px solid #5697FC;
	background-color: #FFFFFF;
	animation: border 0.5s ease-out 1;
}


.contest-types:hover:after {
  border-radius: 10px;
	animation: border-after …

我有以下 Pug 片段，我试图在其中一个标签内显示 URL td。但是，当我运行此命令时，结果输出将显示，a(href=val.url+'/update')后跟正确的#{val.name}. 我该如何告诉 Pugtd标签内的值是一个链接并且#{val.name}应该是超链接？如果我删除表格并在标签href内显示标签，p它就可以正常工作。

extends layout

block content
  h1= title

  table.table.table-condensed
    thead
      tr
        th Name
        th Date Created
        th Date Modified
        th Ready for Hire
      tbody
      each val in list_genres
        tr
          td a(href=val.url+'/update') #{val.name}
          td #{val.date_created}
          td #{val.date_created}
          td No
      else
        li There are no candidates.

密码笔

我想将数据行的高度设置为低于Vuetify.css设置的最小值。我可以将高度设置为任意大的值，但是任何低于〜50px的东西都不起作用。我可以做些CSS覆盖来完成此操作吗？我宁愿不要搜寻Vuetify.css文件并在那里进行更改，但是我无法使用!important任何一种获得所需的格式。

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <tr style="height: 10px;">   <!-- Does nothing. height: 100px works fine. -->
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </tr>
      </template>
    </v-data-table>
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        }, …