小编Ste*_*ant的帖子

我正在尝试对我的元素应用一个简单的边框。当然，自从我接触这个项目以来已经有一段时间了，它似乎构建了 CSS 并输出了它的含义，但我在浏览器中看不到边框。

我错过了一些非常明显的东西吗？

这里我们有 Tailwind 配置文件

module.exports = {
    mode: 'jit',
    purge: ['./templates/**/*.twig', './js/**/*.{js,vue}'],
    corePlugins: {
        preflight: false
    },
    prefix: 'tw-',
    important: true,
    darkMode: false, // or 'media' or 'class'
    theme: {
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1240px',
            '2xl': '1536px'
        },
        // prettier-ignore

        fontFamily: {
            sans: [
                'Nunito',
                '-apple-system',
                'BlinkMacSystemFont',
                'Avenir Next',
                'Avenir',
                'Segoe UI',
                'Lucida Grande',
                'Helvetica Neue',
                'Helvetica',
                'Fira Sans',
                'Roboto',
                'Noto',
                'Droid Sans',
                'Cantarell',
                'Oxygen',
                'Ubuntu',
                'Franklin Gothic Medium',
                'Century Gothic',
                'Liberation …

我有一个相当普通的 Vagrant 盒子，它使用安装了 Node 的 Puphpet 进行配置。

但是，当我 ssh 进入盒子并尝试时，npm install我似乎遇到了很多权限问题。

即使使用 sudo 运行似乎也不起作用

碰上

npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-autoprefixer/2.1.0/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-concat/2.5.2/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-livereload/3.8.0/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/path/0.11.14/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-notify/2.2.0/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-compass/2.0.3/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-minify-css/0.4.6/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-plumber/0.6.6/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp-rename/1.2.0/package.tgz
npm ERR! tar.unpack untar error /home/vagrant/.npm/gulp/3.8.11/package.tgz
npm ERR! tar.unpack …

我在Vue开发过程中稍微考虑过将Vuex用于状态.

以前,我有一个具有搜索功能的主Vue组件,一个要循环的项目数组和项目迭代本身.

当我想将单个组件拆分成几个组件(搜索,项目列表和项目)时 - 我看到我无法在子组件中更改反应属性.

那么,我应该如何过滤我的项目列表.我是通过状态变异还是通过子组件中的计算属性来处理它？

以前我在做

export default {
    components: { Job },
    data() {
        return {
          list: [],
          categories: [],
          states: states,
          countries: countries,
          keyword: '',
          category: '',
          type: '',
          state: '',
          country: '',
          loading: true
        }
  },
  mounted() {
    axios.get('/api/cats.json')
        .then(response => 
            this.categories = response.data.data
        )
    axios.get('/api/jobs.json')
        .then(function (response) {
            this.list = response.data.data;
            this.loading = false;
        }.bind(this))
  },
  computed: {
    filteredByAll() {
      return getByCountry(getByState(getByType(getByCategory(getByKeyword(this.list, this.keyword), this.category), this.type), this.state), this.country)
    },
    filteredByKeyword() {
      return getByKeyword(this.list, this.keyword)
    },
    filteredByCategory() …

我正在构建一个小养老金计算器，我想根据用户当前和退休年龄显示养老金罐的价值。

我希望获取用户的数据、绑定到 Vue 模型的数字字段，然后根据该数据计算锅的价值。

这工作得很好，但是当模型更改时无法让 Highcharts 重绘图表，这是一个问题。

该redrawChart方法会触发，但图表保持不变，控制台告诉我Chart.redraw is not a function。

重绘是 Highcharts API 的一个选项，所以不确定我在哪里失败。

这是标记：

<div id="app">
 <input type="number" min="55" v-model.number="age"  v-on:change="redrawChart">{{ age }}
 <br>
<input type="number" min="1" max="1000000" v-model.number="currentPensionValue" v-on:change="redrawChart">{{ currentPensionValue }}
<br>
<input type="number" min="56" v-model.number="retireAge"  v-on:change="redrawChart">{{ retireAge }}
<br>

<Chart :data="data" :steven="steven" :age-pot-value="agePotValue"></Chart>

以及相关的Vue代码

const Chart = Vue.component('Chart', {
    props: ['data', 'steven', 'agePotValue'],
    template: `
    <div>
        <p>{{ data }}</p>

        <h1>{{ steven }}</h1>
        <h1>{{ agePotValue }}</h1>
        <div id="thechart"></div>
    </div>
    `,
    mounted() { …

我正在尝试从提供如下响应的 API 中检索数据：

{
   "data":[
      {
         "first_name":"John",
         "last_name":"Smith",
         "group":"3",
         "email":"jsmith@talktalk.net"
      },
      {
         "first_name":"John",
         "last_name":"Doe",
         "group":"3",
         "email":"johndoe@aol.com"
      }
   ],
   "meta":{
      "pagination":{
         "total":2,
         "count":2,
         "per_page":500,
         "current_page":1,
         "total_pages":1,
         "links":[

         ]
      }
   }
}

我正在尝试使用 Guzzle 导入到我的 Laravel 应用程序中

$client = new \GuzzleHttp\Client();
      $response = $client->request('GET', 'http://localhost/members.json');
      $data = (string) $response->getBody();

然后 foreach 循环遍历每条记录，然后将其添加到数据库中。现在虽然我正在努力钻研记录。

我错过了什么？

编辑：这是foreach

foreach ($data['data'] as $person) {
        Contact::create(array(
          'name' => $person->first_name,
        ));
      }