Question

这很奇怪但是很简单：

我有一个来自b-nav的导航栏bootstrap-vue，我想在其中填充动态b-nav-item。我的vuejs组件的模板如下所示：

<template>
  <b-nav vertical class="px-2">
    <b-nav-item
      v-for="application in applications"
      :key="application.id"
      to="#">
      {{ application.verboseName }}
    </b-nav-item>
    <b-nav-item :to="{ name: 'BaseSettings' }">
      <font-awesome-icon :icon="['fas', 'cogs']" class="fa-fw mr-1"/>
      Settings
    </b-nav-item>
  </b-nav>
</template>

第二个b-nav-item是静态的，但是第一个applications应该动态地填充为<script> ... apollo: { applications: INSTALLED_APPLICATIONS_QUERY }, ... </script>，我可以在组件中这样检索它：

  data () {
    return {
      apps: [ // used for tests
        { id: '1', verboseName: 'Test1' },
        { id: '2', verboseName: 'Test2' },
        { id: '3', verboseName: 'Test3' },
        { id: '4', verboseName: 'Test4' }
      ]
    }
  }

问题在于它根本不起作用。我已经完成了其他列表，其中填充了graphql检索的其他组件中的内容，并且工作正常。此外，当我尝试提供一些本地数据进行测试时：

  <b-nav vertical class="px-2">
    <b-nav-item
      v-for="application in apps"
      :key="application.id"
      to="#">
      {{ application.verboseName }}
    </b-nav-item>
    ...
  </b-nav>

{{1}}

它运行完美...当我在我的应用程序的/ graphql接口上尝试执行graphql查询时，它也会正确返回所需的数据。我承认这次我不知道在哪里看..

Answer 1

好吧，几个小时后，我突然有了某种照明，我注意到一些我不知道的东西：

用阿波罗填充数据时，我们将数据放入其中的变量必须带有在下面称为查询的名称。

所以我试图做： import 'dart:math'; import 'package:flutter/material.dart'; class FitTextField extends StatefulWidget { final String initialValue; final double minWidth; const FitTextField({ Key key, this.initialValue, this.minWidth: 30, }) : super(key: key); @override State<StatefulWidget> createState() => new FitTextFieldState(); } class FitTextFieldState extends State<FitTextField> { // 2.0 is the default from TextField class static const _CURSOR_WIDTH = 2.0; TextEditingController txt = TextEditingController(); // We will use this text style for the TextPainter used to calculate the width // and for the TextField so that we calculate the correct size for the text // we are actually displaying TextStyle textStyle = TextStyle( color: Colors.grey[600], fontSize: 16, ); initState() { super.initState(); // Set the text in the TextField to our initialValue txt.text = widget.initialValue; } @override Widget build(BuildContext context) { // TextField merges given textStyle with text style from current theme // Do the same to get final TextStyle final ThemeData themeData = Theme.of(context); final TextStyle style = themeData.textTheme.subtitle1.merge(textStyle); // Use TextPainter to calculate the width of our text TextSpan ts = new TextSpan(style: style, text: txt.text); TextPainter tp = new TextPainter( text: ts, textDirection: TextDirection.ltr, ); tp.layout(); // Enforce a minimum width final textWidth = max(widget.minWidth, tp.width + _CURSOR_WIDTH); return Container( width: textWidth, child: TextField( cursorWidth: _CURSOR_WIDTH, style: style, controller: txt, onChanged: (text) { // Redraw the widget setState(() {}); }, ), ); } } 而我的查询是：

apollo: { applications: INSTALLED_APPLICATIONS_QUERY }

所以我要做的是const INSTALLED_APPLICATIONS_QUERY = gql` query { installedApplications { id verboseName } } `。我没有意识到这一点，而且很有趣的是，我在所有其他组件中都在不知不觉中做到了。

v-for在b-nav-item中不呈现

1 个答案: