ionic / vue 输入组件无法正确渲染

Question

我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示：

<template>
  <input type="checkbox" id="checkboxSizes"   @change="emit('changeImages')" />
  <label for="checkboxSizes">Random sizes</label>
  ....
  ....
</template>

显示为

在 Ionic 项目中，而不是

应该如此。 对于其他 html 输入以及 Vuetify 输入组件也会发生同样的情况。其他 Vuetify 组件（例如

v-chip

）正确显示。

Answer 1

将 dout 与 Ionic 无关。在将两个项目合并在一起时，一个组件的部分没有确定作用域，因此影响了它不应该影响的组件。

<style scoped>  /* <--- I forgot this 'scoped' */

  label {
   display: inline-block;
   margin-left: 10px;
   width: 20px;
  }
  line {
    stroke: darkGreen;
    stroke-width: 5px;
  }
</style>