andreipfeiffer

expect.extend({
  toContainObject(received, argument) {

    const pass = this.equals(received, 
      expect.arrayContaining([
        expect.objectContaining(argument)
      ])
    )

    if (pass) {

andreipfeiffer

import { Image, Dimensions } from 'react-native';

export default class RemoteImage extends Component {
  constructor() {
    super();
    
    this.state = {
      // this data could be static or provided by a server or api
      url: 'https://...',
      originalWidth: 1920,

andreipfeiffer

Vue.component('User', {
  template: '<span>{{ fullName }}</span>',

  props: ['firstName', 'lastName'],

  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }

andreipfeiffer

<template>
  <div class="list-container">
    <ul v-if="items.length">
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>No items found.</p>
  </div>
</template>

andreipfeiffer

Vue.component('Counter', {

  functional: true,

  render(createElement, context) {
    return createElement(/**/)
  }

})

andreipfeiffer

export default {
  template: `
    <transition name="slide">
      ...
    </transition>
  `
}

andreipfeiffer

// global Event Bus
const eventBus = new Vue();

/* ... */

// some deeply nested component
methods: {
  onClick() {
    // emit a custom event on the Event Bus, not on "this" component
    eventBus.$emit('save');

andreipfeiffer

// parent component
template: '<Child @save="saveData" />',
methods: {
  saveData() {/**/};
}


// child component
template: '<button @click="onClick">Save</button>',
methods: {

andreipfeiffer

// props declaration
export default {
  props: ['name', 'age']
}


// props declaration, validation & default values
export default {
  props: {
    name: String,

andreipfeiffer

<template>
  <input :value="name" @change="update"/>
</template>

<script>
  export default {
    methods: {
      update(event) {
        this.name = event.target.value;
      }