小编Jos*_*ers的帖子

我想在我的组件文件中创建一个组件，然后在我的基本应用程序中包含它（如以前的ng-include）。

我的App.vue看起来像这样：

   <template>
    <div id="app">
     <div class="container-fluid">
      <div class="row>
       <navigation></navigation>
      </div>
      <div class="row">
       <router-view></router-view>
      </div>
     </div>
    </div>
   </template>

   <script>
    export default {
     name: 'app',
    }
   </script>

   <style>
    #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }
   </style>

我的main.js文件如下所示：

   import Vue from 'vue'
   import App from './App'
   import VueRouter from 'vue-router'
   import homepage from './components/homepage'
   import navigation from './components/navigation'

   Vue.use(VueRouter)

   const routes = [
    { path: '/', component: homepage}
   ]

   const router …

我知道如何使用常规表单输入/选择/等对其进行样式设置，但我已从使用这些切换到 Formik Field，并且上述方法的工作方式不同。

<Formik
  initialValues={{
    example: ''
  }}
  validate={(values) => {
    const errors = {};

    if (!values.example) errors.example = 'Required';

    return errors;

  }}
  onSubmit={this.handleSubmit}
  render={formProps => {
    return (
      <Form>
        <Field type='text' name='example' />
        <ErrorMessage name='example' />
      </Form>
    )
  }} />

那么，如果提交时为空，我将如何将输入的边框从通常的任何内容更改为红色？

我想更改输入的边框大小、颜色等。出于某种原因，当我将 2 个输入堆叠在一起时，我将 marginTop 添加到下面的输入，或者尝试调整输入的大小，然后将它们居中在页面中，左侧或底部的边框消失。

<View style={styles.formAlign}>
    <Item regular style={styles.email}>
        <Input placeholder='Email' />
     </Item>
     <Item regular style={styles.password}>
         <Input placeholder='Password' />
     </Item>
</View>





email:{
   borderWidth:4,
   color:'red'
},
password:{

},
formAlign:{
    justifyContent:'center',
    alignItems:'center'
},

Ok, so i have the following method. Basically I am calling an API backend, posting username and password, and if those pass, in the response, the server sends me a 200 status. What I want to do, is in the response, after I get the status, run an if/else, so if the status is 200, redirect, else display an error message. every time i try to use 'this.$router.push('/any route here')',

I get an error: 'homepage.vue?3ec6:72 Uncaught (in promise) TypeError: Cannot …

我正在使用网格，出于某种原因，max-width在媒体查询中使用似乎没有任何作用。代码如下：

代码：

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1rem;
  grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}

@media only screen and (max-width:700px) {
  #content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header' 'block_1' 'block_2'
  }
}

#content>* {
  background-color: #fff;
  border: 1px solid black;
}

.header {
  grid-area: header;
  height: 150px;
}

.block_1 {
  grid-area: block_1;
  height: 150px;
} …

我有一个基本的反应组件，我正在尝试访问 navigator.mediaDevices.getUserMedia 中的视频。但是，我不断收到“无法将属性“srcObject”设置为 null”

import React, {Component} from 'react';

export default class Example extends Component{
    render(){

    const video = document.querySelector('video');
    const constraints = {video:true}
    navigator.mediaDevices.getUserMedia(constraints).then(

        (stream) => {video.srcObject = stream})

        return(
        <div>
            <video>

            </video>
        </div>
        )
    }
}

以上返回：

无法将属性“srcObject”设置为 null

有任何想法吗？

我有一个在vue组件之外运行的函数.我希望它返回的数据传递给vue组件中的数据.

    <script>
      function example(){
        var item = 'item';
      };

      example();

      export default {
        data(){
          return (this is where I want item represented)
        }
      }